import { Button } from "@/components/ui/button";

const quickCrops = ["rice", "maize", "wheat", "soybean", "cotton"];

interface CropHeaderProps {
  total: number;
  loading: boolean;
  onSelectQuickCrop: (name: string) => void;
}

export function CropHeader({ total, loading, onSelectQuickCrop }: CropHeaderProps) {
  return (
    <div className="relative grid gap-6 overflow-hidden rounded-[34px] bg-[radial-gradient(circle_at_12%_15%,rgba(187,247,208,0.94),transparent_28%),linear-gradient(135deg,var(--primary),#0f766e_48%,#84cc16)] p-6 text-primary-foreground shadow-agriculture lg:grid-cols-[1fr_240px] lg:p-8">
      <div className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-primary-foreground/15 blur-sm" />
      <div className="relative z-10 max-w-3xl">
        <div className="mb-4 inline-flex rounded-full border border-primary-foreground/25 bg-primary-foreground/15 px-3 py-1 text-xs font-black uppercase tracking-[0.2em]">
          农业基础字典入口 / Crop
        </div>
        <h1 className="text-3xl font-black tracking-tight md:text-5xl">作物字典录入</h1>
        <p className="mt-4 max-w-2xl text-sm leading-7 text-primary-foreground/90 md:text-base">
          维护 BrAPI 标准 <strong className="font-black">crop</strong> 表。这里录入的作物会成为 Program、Trial、Study、Germplasm 等数据的基础入口。
        </p>
        <div className="mt-5 flex flex-wrap gap-2">
          {quickCrops.map((name) => (
            <Button key={name} type="button" variant="outline" className="rounded-full border-primary-foreground/20 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/25" onClick={() => onSelectQuickCrop(name)}>
              {name}
            </Button>
          ))}
        </div>
      </div>
      <div className="relative z-10 flex min-h-44 flex-col justify-between rounded-3xl border border-primary-foreground/20 bg-primary-foreground/15 p-5 shadow-2xl shadow-emerald-950/15 backdrop-blur">
        <span className="text-sm font-black text-primary-foreground/85">当前作物</span>
        <strong className="text-6xl font-black leading-none">{total}</strong>
        <em className="not-italic text-sm font-bold text-primary-foreground/85">{loading ? "正在同步数据库..." : "已连接 crop 表"}</em>
      </div>
    </div>
  );
}
