"use client"

import type { ProceduresComparisonSectionData } from "@/lib/pages/procedures-page/form-types"

interface Props {
  value: ProceduresComparisonSectionData
  onChange: (value: ProceduresComparisonSectionData) => void
  disabled?: boolean
  validation?: {
    eyebrow?: boolean
    title?: boolean
    subtitle?: boolean
  }
}

function fieldClass(invalid = false) {
  return `w-full bg-card border rounded-xl px-3 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 ${
    invalid
      ? "border-red-400 focus:ring-red-200/70 focus:border-red-500"
      : "border-border focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
  }`
}

function Label({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
      {children}
    </label>
  )
}

export function ProceduresComparisonSection({ value, onChange, disabled = false, validation }: Props) {
  function set<K extends keyof ProceduresComparisonSectionData>(key: K, val: ProceduresComparisonSectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-col gap-1.5">
        <Label>Eyebrow</Label>
        <input
          type="text"
          value={value.eyebrow}
          disabled={disabled}
          onChange={(e) => set("eyebrow", e.target.value)}
          placeholder="e.g. Compare Costs"
          className={fieldClass(!!validation?.eyebrow)}
        />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input
          type="text"
          value={value.title}
          disabled={disabled}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. Procedure Cost Comparison"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Subtitle</Label>
        <textarea
          value={value.subtitle}
          disabled={disabled}
          onChange={(e) => set("subtitle", e.target.value)}
          placeholder="Write a subtitle for the comparison section..."
          rows={3}
          className={`${fieldClass(!!validation?.subtitle)} resize-none leading-relaxed`}
        />
      </div>
    </div>
  )
}