import { Text, View} from '@tarojs/components'
import style from './index.module.less'
import { useState } from 'react';
interface Props {
  status: number; // 状态
}
export default function Index({status}: Props) {
  const [textStatus, setTextStatus] = useState('你可以开始说话')

  return (
    <View className={style.searchBarContainer}>
      <View className='mb-2 flex items-center justify-center'>
          <View className={style.speachAnimation}>
            <View className={style.speachAnimationItem} style={{backgroundColor: 'rgba(0,0,0, .3)'}}></View>
            <View className={style.speachAnimationItem} style={{backgroundColor: 'rgba(0,0,0, .7)'}}></View>
            <View className={style.speachAnimationItem} style={{backgroundColor: 'rgba(0,0,0, .9)'}}></View>
            <View className={style.speachAnimationItem} style={{backgroundColor: 'rgba(0,0,0, 1)'}}></View>
          </View>
        </View>
        <View className='flex items-center justify-center'><Text className={style.speachStatusText}>{textStatus}</Text></View>
    </View>
  )
}
