'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Field } from './gisMapReducer';

interface SelectedFieldInfoProps {
  selectedField: Field | null;
  onClose: () => void;
}

export function SelectedFieldInfo({ selectedField, onClose }: SelectedFieldInfoProps) {
  if (!selectedField) {
    return null;
  }

  return (
    <Card className="p-6 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
      <div className="flex items-start justify-between mb-4">
        <div>
          <h3 className="text-green-800 dark:text-green-400 mb-1">{selectedField.name}</h3>
          <Badge
            style={{
              backgroundColor: selectedField.color + '20',
              color: selectedField.color,
              borderColor: selectedField.color,
            }}
            className="border font-light"
          >
            {selectedField.plantingMode}
          </Badge>
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={onClose}
        >
          关闭
        </Button>
      </div>
      <div className="grid grid-cols-3 gap-4 text-sm">
        <div>
          <span className="text-muted-foreground">地块面积</span>
          <div className="mt-1">{selectedField.area} 亩</div>
        </div>
        <div>
          <span className="text-muted-foreground">土壤类型</span>
          <div className="mt-1">{selectedField.soilType}</div>
        </div>
        <div>
          <span className="text-muted-foreground">种植模式</span>
          <div className="mt-1">{selectedField.plantingMode}</div>
        </div>
      </div>
    </Card>
  );
}