import { View } from '@tarojs/components'
import classnames from 'classnames'
import type { FC } from 'react'
import '../../index.scss'

export interface StepProps {
  title?: React.ReactNode
  description?: React.ReactNode
  icon?: React.ReactNode
  status?: 'wait' | 'process' | 'finish' | 'error'
}

const Step: FC<StepProps> = (props) => {
  const {
    title,
    description,
    icon,
    status = 'wait',
  } = props
  console.log('status==>', status)
  return <View className={classnames(`step-status-${status}`, 'step')}>
    <View className="step-indicator">
      <View className="step-icon-container">{icon || <View className="step-icon-dot"></View>}</View>
    </View>
    <View className="step-content">
      <View className="step-title">{title}</View>
      {!!description && <View className="step-description">{description}</View>}
    </View>
  </View>
}
export default Step
