"use client";

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/app/shadcn_components/ui/select";
import type { FC } from "react";

export interface ScenarioOption {
  id: number;
  name: string;
}

interface ScenarioSelectorProps {
  scenarios: ScenarioOption[];
  selected: number | null | "default";
  onChange: (id: number | null | "default") => void;
}

export const ScenarioSelector: FC<ScenarioSelectorProps> = ({
  scenarios,
  selected,
  onChange,
}) => {
  return (
    <div className="flex items-center gap-3">
      <span className="text-sm text-gray-600">Scenario:</span>

      <Select
        value={
          selected === null
            ? "none"
            : selected === "default"
              ? "default"
              : String(selected)
        }
        onValueChange={(val) => {
          if (val === "none") onChange(null);
          else if (val === "default") onChange("default");
          else onChange(Number(val));
        }}
      >
        <SelectTrigger className="w-56 bg-white border-gray-200 shadow-sm">
          <SelectValue placeholder="Select scenario" />
        </SelectTrigger>

        <SelectContent>
          <SelectItem value="none">No scenario (baseline only)</SelectItem>

          <SelectItem value="default">
            Best option (recommended plans)
          </SelectItem>

          {scenarios.map((s) => (
            <SelectItem key={s.id} value={String(s.id)}>
              {s.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
};
