import { IconButton } from '@/components/ui/button'
import { WaveAnimation } from '@/components/ui/wave-animation'

interface VoiceCardProps {
  selected?: boolean
  playing?: boolean
  title: string
  description: string
  onPlay?: () => void
  onSelect?: () => void
  onDeselect?: () => void
}

export default function VoiceCard({
  selected,
  playing,
  title,
  description,
  onPlay,
  onSelect,
  onDeselect,
}: VoiceCardProps) {
  return (
    <div
      className={`rounded-m relative flex cursor-pointer items-center gap-4 p-4 transition-colors ${
        selected ? 'bg-surface-element-normal' : 'bg-surface-element-normal'
      }`}
      onClick={onPlay}
    >
      {selected && (
        <div className="border-primary-variant-normal rounded-m pointer-events-none absolute inset-0 border-2" />
      )}
      <IconButton variant="ghost" size="small" type="button" className="h-8 w-8 shrink-0 p-2">
        {playing ? (
          <WaveAnimation className="text-txt-primary-normal" />
        ) : (
          <i className="iconfont icon-Play text-txt-primary-normal" />
        )}
      </IconButton>
      <div className="min-w-0 flex-1">
        <h3 className="txt-title-s text-txt-primary-normal truncate">{title}</h3>
        <p className="txt-body-m text-txt-secondary-normal mt-1 truncate">{description}</p>
      </div>
      <IconButton
        variant="ghost"
        size="small"
        type="button"
        className="h-8 w-8 shrink-0 p-2"
        onClick={(e) => {
          e.stopPropagation()
          if (selected) {
            onDeselect?.()
          } else {
            onSelect?.()
          }
        }}
      >
        {selected ? (
          <i className="iconfont icon-close text-txt-primary-normal" />
        ) : (
          <i className="iconfont icon-add text-txt-primary-normal" />
        )}
      </IconButton>
    </div>
  )
}
