import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import type { MarqueeSettings } from "@/lib/marquee-settings";

type MarqueeSettingsFormProps = {
  action: (formData: FormData) => Promise<void>;
  initialSettings: MarqueeSettings;
};

const rowMeta = [
  { key: "row1", label: "Row 1" },
  { key: "row2", label: "Row 2" },
  { key: "row3", label: "Row 3" },
  { key: "row4", label: "Row 4" },
] as const;

export function MarqueeSettingsForm({
  action,
  initialSettings,
}: MarqueeSettingsFormProps) {
  return (
    <form id="marquee-settings-form" action={action} className="space-y-5">
      <div className="space-y-2">
        <h2 className="text-lg font-semibold text-foreground">Marquee Rows</h2>
        <p className="text-sm text-muted-foreground">Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</p>
      </div>

      <div className="grid gap-4 xl:grid-cols-4">
        {rowMeta.map((row) => (
          <AppCard key={`de-${row.key}`} level={2} layer="single" padding="sm" className="space-y-2">
            <Label htmlFor={`${row.key}-de`} className="text-sm font-semibold text-foreground">{row.label}</Label>
            <Textarea
              id={`${row.key}-de`}
              name={`${row.key}-de`}
              defaultValue={initialSettings.locales.de[row.key]}
              className="min-h-[220px] resize-y"
            />
          </AppCard>
        ))}
      </div>
      <div className="flex justify-end">
        <Button type="submit">Save Marquee</Button>
      </div>
    </form>
  );
}