import { OddsLineMovementChart } from '@/components/OddsLineMovementChart';

const samples = [
  { time: '12:00', bookmaker: 'Bet365', odds: 1.82 },
  { time: '12:30', bookmaker: 'Bet365', odds: 1.79 },
  { time: '13:00', bookmaker: 'Bet365', odds: 1.84 },
  { time: '12:00', bookmaker: 'Pinnacle', odds: 1.8 },
  { time: '12:30', bookmaker: 'Pinnacle', odds: 1.77 },
  { time: '13:00', bookmaker: 'Pinnacle', odds: 1.85 },
  { time: '12:00', bookmaker: 'DraftKings', odds: 1.83 },
  { time: '12:30', bookmaker: 'DraftKings', odds: 1.81 },
  { time: '13:00', bookmaker: 'DraftKings', odds: 1.8 },
];

export default function OddsPage() {
  return (
    <div className="space-y-4">
      <h2 className="dot-matrix text-2xl text-[#7d2a15]">跨平台賠率比較矩陣</h2>
      <section className="panel-glow rounded-2xl p-5">
        <p className="text-sm text-[#7a5b46]">此頁面接入後端 odds API 與 Redis 快取後，可顯示即時最高賠率、套利空間與賠率走勢線。</p>
        <div className="mt-5 overflow-auto rounded-xl border border-[#d8b58c] bg-white/65">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="bg-[#f3e3ca] text-left">
                <th className="px-3 py-2">場次</th>
                <th className="px-3 py-2">Bet365</th>
                <th className="px-3 py-2">Pinnacle</th>
                <th className="px-3 py-2">DraftKings</th>
                <th className="px-3 py-2">套利</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="px-3 py-2">德國 vs 西班牙</td>
                <td className="px-3 py-2">1.92</td>
                <td className="px-3 py-2">1.90</td>
                <td className="px-3 py-2">1.91</td>
                <td className="px-3 py-2 text-emerald-700">低</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <OddsLineMovementChart data={samples} />
    </div>
  );
}