'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { MapPin } from 'lucide-react';
import { FieldData } from './multiDimensionReducer';

interface BasicPropertiesProps {
  comparisonFields: FieldData[];
}

export function BasicProperties({ comparisonFields }: BasicPropertiesProps) {
  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <MapPin className="w-5 h-5 text-blue-600" />
        <h3>基础属性对比</h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-muted">
            <tr>
              <th className="px-4 py-3 text-left text-xs">指标项</th>
              {comparisonFields.map(field => (
                <th key={field.id} className="px-4 py-3 text-center text-xs">
                  {field.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">面积 (亩)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  {field.area}
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">位置</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  {field.location}
                </td>
              ))}
            </tr>
            <tr className="border-t border-border">
              <td className="px-4 py-3 text-sm font-medium">土壤类型</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <Badge variant="outline">{field.soilType}</Badge>
                </td>
              ))}
            </tr>
            <tr className="border-t bg-muted/50">
              <td className="px-4 py-3 text-sm font-medium">坡度 (°)</td>
              {comparisonFields.map(field => (
                <td key={field.id} className="px-4 py-3 text-center text-sm">
                  <span className={field.slope <= 3 ? 'text-green-600' : field.slope <= 5 ? 'text-yellow-600' : 'text-red-600'}>
                    {field.slope}
                  </span>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}