"use client";

import type { XmlGeneratorMode } from "../types";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { cn } from "@/shared/lib/utils";

interface XmlSettingsProps {
  baseNamespace: string;
  mode: XmlGeneratorMode;
  onSetBaseNamespace: (ns: string) => void;
  onSetMode: (mode: XmlGeneratorMode) => void;
}

export function XmlSettings({
  baseNamespace,
  mode,
  onSetBaseNamespace,
  onSetMode,
}: XmlSettingsProps) {
  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="xml-ns">Bază Namespace</Label>
        <Input
          id="xml-ns"
          value={baseNamespace}
          onChange={(e) => onSetBaseNamespace(e.target.value)}
          className="mt-1 font-mono text-xs"
        />
        <p className="mt-1 text-xs text-muted-foreground">
          Se completează automat cu <code>/Categorie</code>
        </p>
      </div>

      <div className="flex items-center gap-4">
        <div>
          <Label className="mb-1.5 block">Mod generare</Label>
          <div className="flex gap-1.5">
            {(["simple", "advanced"] as XmlGeneratorMode[]).map((m) => (
              <button
                key={m}
                type="button"
                onClick={() => onSetMode(m)}
                className={cn(
                  "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
                  mode === m
                    ? "border-primary bg-primary text-primary-foreground"
                    : "border-border hover:bg-accent",
                )}
              >
                {m === "simple" ? "Simple" : "Advanced"}
              </button>
            ))}
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            {mode === "simple"
              ? "Doar câmpurile definite."
              : "+ Short / Upper / Lower / Initials / First."}
          </p>
        </div>
      </div>
    </div>
  );
}
