import { useState } from "react"

interface FlashCardProps {
  word?: string
  phonetic?: string
  meaningVi?: string
  example?: string
}

export function FlashCard({ word, phonetic, meaningVi, example }: FlashCardProps) {
  const [flipped, setFlipped] = useState(false)

  return (
    <div
      onClick={() => setFlipped((f) => !f)}
      className="rounded-lg border p-6 text-center cursor-pointer min-h-[160px] flex flex-col justify-center select-none hover:bg-gray-50"
    >
      {!flipped ? (
        <div>
          <p className="text-2xl font-bold">{word || "word"}</p>
          {phonetic && <p className="text-gray-400 mt-1">{phonetic}</p>}
        </div>
      ) : (
        <div className="space-y-2">
          <p className="text-lg font-semibold text-blue-600">{meaningVi || "nghĩa tiếng Việt"}</p>
          {example && <p className="text-sm text-gray-500 italic">{example}</p>}
        </div>
      )}
    </div>
  )
}
