w-funnel/src/components/admin/builder/templates/InfoScreenConfig.tsx

"use client";

import { TextInput } from "@/components/ui/TextInput/TextInput";
import type { InfoScreenDefinition, TypographyVariant } from "@/lib/funnel/types";
import type { BuilderScreen } from "@/lib/admin/builder/types";

interface InfoScreenConfigProps {
  screen: BuilderScreen & { template: "info" };
  onUpdate: (updates: Partial<InfoScreenDefinition>) => void;
}

export function InfoScreenConfig({ screen, onUpdate }: InfoScreenConfigProps) {
  const infoScreen = screen as InfoScreenDefinition & { position: { x: number; y: number } };
  
  return (
    <div className="space-y-4">
      {/* Title Configuration */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Title</label>
        <TextInput
          placeholder="Enter screen title"
          value={infoScreen.title?.text || ""}
          onChange={(e) => onUpdate({
            title: {
              ...infoScreen.title,
              text: e.target.value,
              font: infoScreen.title?.font || "manrope",
              weight: infoScreen.title?.weight || "bold",
              align: infoScreen.title?.align || "center",
            }
          })}
        />
        
        <div className="grid grid-cols-2 gap-2">
          <select
            className="rounded border border-border bg-background px-2 py-1 text-sm"
            value={infoScreen.title?.font || "manrope"}
            onChange={(e) => onUpdate({
              title: {
                ...infoScreen.title,
                text: infoScreen.title?.text || "",
                font: e.target.value as TypographyVariant['font'],
              }
            })}
          >
            <option value="manrope">Manrope</option>
            <option value="inter">Inter</option>
          </select>
          
          <select
            className="rounded border border-border bg-background px-2 py-1 text-sm"
            value={infoScreen.title?.weight || "bold"}
            onChange={(e) => onUpdate({
              title: {
                ...infoScreen.title,
                text: infoScreen.title?.text || "",
                weight: e.target.value as TypographyVariant['weight'],
              }
            })}
          >
            <option value="medium">Medium</option>
            <option value="bold">Bold</option>
            <option value="semibold">Semibold</option>
          </select>
        </div>
      </div>

      {/* Description Configuration */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Description (Optional)</label>
        <TextInput
          placeholder="Enter screen description"
          value={infoScreen.description?.text || ""}
          onChange={(e) => onUpdate({
            description: e.target.value ? {
              text: e.target.value,
              font: infoScreen.description?.font || "inter",
              weight: infoScreen.description?.weight || "medium",
              align: infoScreen.description?.align || "center",
            } : undefined
          })}
        />
      </div>

      {/* Icon Configuration */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Icon (Optional)</label>
        <div className="grid grid-cols-2 gap-2">
          <select
            className="rounded border border-border bg-background px-2 py-1 text-sm"
            value={infoScreen.icon?.type || "emoji"}
            onChange={(e) => onUpdate({
              icon: infoScreen.icon ? {
                ...infoScreen.icon,
                type: e.target.value as "emoji" | "image",
              } : {
                type: e.target.value as "emoji" | "image",
                value: "❤️",
                size: "lg",
              }
            })}
          >
            <option value="emoji">Emoji</option>
            <option value="image">Image</option>
          </select>
          
          <select
            className="rounded border border-border bg-background px-2 py-1 text-sm"
            value={infoScreen.icon?.size || "lg"}
            onChange={(e) => onUpdate({
              icon: infoScreen.icon ? {
                ...infoScreen.icon,
                size: e.target.value as "sm" | "md" | "lg" | "xl",
              } : {
                type: "emoji",
                value: "❤️",
                size: e.target.value as "sm" | "md" | "lg" | "xl",
              }
            })}
          >
            <option value="sm">Small</option>
            <option value="md">Medium</option>
            <option value="lg">Large</option>
            <option value="xl">Extra Large</option>
          </select>
        </div>
        
        <TextInput
          placeholder={infoScreen.icon?.type === "image" ? "Image URL" : "Emoji (e.g., ❤️)"}
          value={infoScreen.icon?.value || ""}
          onChange={(e) => onUpdate({
            icon: e.target.value ? {
              type: infoScreen.icon?.type || "emoji",
              value: e.target.value,
              size: infoScreen.icon?.size || "lg",
            } : undefined
          })}
        />
      </div>

      {/* Bottom Action Button */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Button Text (Optional)</label>
        <TextInput
          placeholder="Next"
          value={infoScreen.bottomActionButton?.text || ""}
          onChange={(e) => onUpdate({
            bottomActionButton: e.target.value ? {
              text: e.target.value,
            } : undefined
          })}
        />
      </div>
    </div>
  );
}