import { AppCard } from "@/components/ui/app-card";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
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-6">
      <AppCard>
        <CardHeader>
          <CardTitle>Marquee Rows</CardTitle>
          <CardDescription>Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
            <div>
              <h3 className="text-sm font-semibold text-foreground">Deutsch</h3>
              <p className="text-xs text-muted-foreground">Vier Marquee Zeilen. Diese Werte gelten fuer alle Sprachen.</p>
            </div>

            <div className="space-y-4">
              {rowMeta.map((row) => (
                <div key={`de-${row.key}`} className="space-y-2">
                  <Label htmlFor={`${row.key}-de`}>{row.label}</Label>
                  <Textarea
                    id={`${row.key}-de`}
                    name={`${row.key}-de`}
                    defaultValue={initialSettings.locales.de[row.key]}
                    className="min-h-[180px] resize-y"
                  />
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </AppCard>
    </form>
  );
}
