"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

import type { CommonSettingsCurrencyOption } from "../_lib/common-settings-api";

export function SettingsPanelCommon({
  offset1,
  defaultCurrency,
  hasDefaultCurrency,
  currencies,
  labels,
  isLoading,
  errorMessage,
  onOffsetChange,
  onDefaultCurrencyChange,
}: {
  offset1: string;
  defaultCurrency: string;
  hasDefaultCurrency: boolean;
  currencies: CommonSettingsCurrencyOption[];
  labels: { offset1: string; default_currency: string };
  isLoading: boolean;
  errorMessage: string | null;
  onOffsetChange: (value: string) => void;
  onDefaultCurrencyChange: (value: string) => void;
}) {
  return (
    <div className="space-y-5">
      {isLoading ? (
        <p className="text-muted-foreground text-sm">Loading common settings…</p>
      ) : null}
      {errorMessage ? <p className="text-destructive text-sm">{errorMessage}</p> : null}

      <div className="grid max-w-md gap-5">
        <div className="space-y-2">
          <Label htmlFor="common-offset">
            {labels.offset1} <span className="text-destructive">*</span>
          </Label>
          <Input
            id="common-offset"
            type="text"
            inputMode="numeric"
            value={offset1}
            disabled={isLoading}
            onChange={(event) => onOffsetChange(event.target.value)}
            autoComplete="off"
          />
        </div>

        {hasDefaultCurrency ? (
          <div className="space-y-2">
            <Label htmlFor="common-default-currency">
              {labels.default_currency} <span className="text-destructive">*</span>
            </Label>
            <Select
              value={defaultCurrency || undefined}
              onValueChange={onDefaultCurrencyChange}
              disabled={isLoading || currencies.length === 0}
            >
              <SelectTrigger id="common-default-currency" className="w-full bg-background">
                <SelectValue placeholder="Please Select" />
              </SelectTrigger>
              <SelectContent>
                {currencies.map((currency) => (
                  <SelectItem key={currency.value} value={String(currency.value)}>
                    {currency.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        ) : null}
      </div>
    </div>
  );
}