'use client';

import { Card } from '@/components/ui/card';

export function DataTable() {
  return (
    <Card className="p-6">
      <h3 className="mb-4">分层数据详细对比</h3>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-muted">
            <tr>
              <th className="px-4 py-3 text-left text-sm">土层深度</th>
              <th className="px-4 py-3 text-center text-sm">有机质 (g/kg)</th>
              <th className="px-4 py-3 text-center text-sm">全氮 (g/kg)</th>
              <th className="px-4 py-3 text-center text-sm">有效磷 (mg/kg)</th>
              <th className="px-4 py-3 text-center text-sm">速效钾 (mg/kg)</th>
              <th className="px-4 py-3 text-center text-sm">平均pH值</th>
              <th className="px-4 py-3 text-center text-sm">含水量 (%)</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t">
              <td className="px-4 py-3 font-medium">0-20cm</td>
              <td className="px-4 py-3 text-center">28.5</td>
              <td className="px-4 py-3 text-center">1.2</td>
              <td className="px-4 py-3 text-center">25.3</td>
              <td className="px-4 py-3 text-center">180</td>
              <td className="px-4 py-3 text-center">6.8</td>
              <td className="px-4 py-3 text-center">22.5</td>
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 font-medium">20-40cm</td>
              <td className="px-4 py-3 text-center">20.2</td>
              <td className="px-4 py-3 text-center">0.8</td>
              <td className="px-4 py-3 text-center">18.5</td>
              <td className="px-4 py-3 text-center">145</td>
              <td className="px-4 py-3 text-center">6.5</td>
              <td className="px-4 py-3 text-center">25.8</td>
            </tr>
            <tr className="border-t">
              <td className="px-4 py-3 font-medium">40-60cm</td>
              <td className="px-4 py-3 text-center">13.5</td>
              <td className="px-4 py-3 text-center">0.5</td>
              <td className="px-4 py-3 text-center">12.3</td>
              <td className="px-4 py-3 text-center">98</td>
              <td className="px-4 py-3 text-center">6.3</td>
              <td className="px-4 py-3 text-center">28.2</td>
            </tr>
            <tr className="border-t bg-yellow-50 dark:bg-yellow-950">
              <td className="px-4 py-3 font-medium">层间变化率</td>
              <td className="px-4 py-3 text-center text-red-600">-29.1%</td>
              <td className="px-4 py-3 text-center text-red-600">-33.3%</td>
              <td className="px-4 py-3 text-center text-red-600">-26.8%</td>
              <td className="px-4 py-3 text-center text-red-600">-19.4%</td>
              <td className="px-4 py-3 text-center text-orange-600">-7.4%</td>
              <td className="px-4 py-3 text-center text-blue-600">+25.3%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}