"use client";

import { Minus, Plus } from "lucide-react";

import { HEIR_TYPES, HEIR_LABELS, type HeirType } from "@/types/inheritance";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

interface HeirSelectorGridProps {
  values: Record<HeirType, number>;
  onChange: (type: HeirType, count: number) => void;
}

export function HeirSelectorGrid({ values, onChange }: HeirSelectorGridProps) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {HEIR_TYPES.map((type) => {
        const count = values[type];

        return (
          <Card key={type} className="border border-border bg-card">
            <CardContent className="flex items-center justify-between gap-3 p-3">
              <p className="text-sm font-medium text-emerald-900">{HEIR_LABELS[type]}</p>
              <div className="flex items-center gap-2">
                <Button
                  type="button"
                  size="icon-sm"
                  variant="outline"
                  onClick={() => onChange(type, Math.max(0, count - 1))}
                  aria-label={`Decrease ${HEIR_LABELS[type]}`}
                >
                  <Minus className="size-3.5" />
                </Button>
                <span className="w-6 text-center text-sm font-semibold">{count}</span>
                <Button
                  type="button"
                  size="icon-sm"
                  variant="outline"
                  onClick={() => onChange(type, Math.min(10, count + 1))}
                  aria-label={`Increase ${HEIR_LABELS[type]}`}
                >
                  <Plus className="size-3.5" />
                </Button>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}