dramaling-vocab-learning/frontend/components/generate/VocabularyStatsGrid.tsx

import React from 'react'
import { StatisticsCard } from '@/components/shared/StatisticsCard'

interface VocabularyStats {
  simpleCount: number
  moderateCount: number
  difficultCount: number
  idiomCount: number
}

interface VocabularyStatsGridProps {
  stats: VocabularyStats
  className?: string
}

export const VocabularyStatsGrid: React.FC<VocabularyStatsGridProps> = ({
  stats,
  className = ''
}) => {
  return (
    <div className={`grid grid-cols-2 gap-3 sm:gap-4 ${className}`}>
      <StatisticsCard
        count={stats.simpleCount}
        label="簡單詞彙"
        variant="green"
      />
      <StatisticsCard
        count={stats.moderateCount}
        label="中等詞彙"
        variant="orange"
      />
      <StatisticsCard
        count={stats.difficultCount}
        label="困難詞彙"
        variant="red"
      />
      <StatisticsCard
        count={stats.idiomCount}
        label="成語俚語"
        variant="purple"
      />
    </div>
  )
}