import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import type { Product } from "@/lib/data";

export function ProductForm({
  action,
  defaultValues,
  submitLabel,
}: {
  action: (formData: FormData) => void;
  defaultValues?: Product;
  submitLabel: string;
}) {
  return (
    <form action={action} className="flex flex-col gap-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="title">Titre du produit *</Label>
        <Input
          id="title"
          name="title"
          required
          defaultValue={defaultValues?.title}
          placeholder="ex. Lampe LED pliable USB"
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col gap-2">
          <Label htmlFor="price">Prix</Label>
          <Input
            id="price"
            name="price"
            type="number"
            step="0.01"
            min="0"
            defaultValue={defaultValues?.price ?? undefined}
            placeholder="149"
          />
        </div>
        <div className="flex flex-col gap-2">
          <Label htmlFor="currency">Devise</Label>
          <Input
            id="currency"
            name="currency"
            defaultValue={defaultValues?.currency ?? "MAD"}
          />
        </div>
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="source_url">Lien Telegram / source</Label>
        <Input
          id="source_url"
          name="source_url"
          type="url"
          defaultValue={defaultValues?.source_url ?? undefined}
          placeholder="https://t.me/..."
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="image_url">Lien de l&apos;image</Label>
        <Input
          id="image_url"
          name="image_url"
          type="url"
          defaultValue={defaultValues?.image_url ?? undefined}
          placeholder="https://..."
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="tags">Tags (séparés par des virgules)</Label>
        <Input
          id="tags"
          name="tags"
          defaultValue={defaultValues?.tags.join(", ")}
          placeholder="maison, gadgets, cuisine"
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="description">Notes</Label>
        <Textarea
          id="description"
          name="description"
          rows={4}
          defaultValue={defaultValues?.description ?? undefined}
          placeholder="Pourquoi ce produit est intéressant, marge estimée, fournisseur..."
        />
      </div>

      <Button type="submit" className="self-start">
        {submitLabel}
      </Button>
    </form>
  );
}