const EARN_ITEMS = [
  { label: 'Mục tiêu ngày', reward: '+10 xu' },
  { label: 'Mốc chuỗi (Streak)', reward: '+20 xu' },
  { label: 'Xem quảng cáo', reward: '+5 xu' },
]

const SPEND_ITEMS = [
  { label: 'Streak Freeze', cost: '20 xu' },
  { label: 'AI Writing Feedback', cost: '30 xu' },
]

export function XuEconomyCard() {
  return (
    <div className="lg:col-span-4 bg-white p-6 rounded-xl shadow-sm">
      <h3 className="text-base font-bold text-slate-800 mb-5">Cửa hàng Xu</h3>

      <div className="space-y-5">
        {/* Earn */}
        <div>
          <span className="text-xs text-green-600 font-bold uppercase tracking-wider block mb-2.5">Kiếm Xu</span>
          <div className="space-y-2">
            {EARN_ITEMS.map((item) => (
              <div key={item.label} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                <span className="text-sm font-medium text-slate-700">{item.label}</span>
                <span className="text-sm font-bold text-amber-600">{item.reward}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Spend */}
        <div>
          <span className="text-xs text-red-500 font-bold uppercase tracking-wider block mb-2.5">Tiêu Xu</span>
          <div className="space-y-2">
            {SPEND_ITEMS.map((item) => (
              <div key={item.label} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg opacity-80">
                <span className="text-sm font-medium text-slate-700">{item.label}</span>
                <span className="text-sm font-bold text-slate-400">{item.cost}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}