"use client"

export interface HospitalPackagesData {
  eyebrow: string
  title: string
  subtitle: string
}

interface Props {
  value: HospitalPackagesData
  onChange: (value: HospitalPackagesData) => void
}

const inputClass =
  "w-full bg-card border border-border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors"

export function HospitalPackagesSection({ value, onChange }: Props) {
  function set<K extends keyof HospitalPackagesData>(key: K, val: HospitalPackagesData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Eyebrow</label>
          <input type="text" value={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Our Packages" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Title</label>
          <input type="text" value={value.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Medical Packages" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Subtitle</label>
          <input type="text" value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="e.g. Tailored care bundles for every need" className={inputClass} />
        </div>
      </div>
      <div
        className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-sans"
        style={{ background: "rgba(43,182,115,0.06)", borderLeft: "3px solid var(--brand-green)", color: "var(--brand-navy)" }}
      >
        <span className="w-2 h-2 rounded-full shrink-0" style={{ background: "var(--brand-green)" }} aria-hidden="true" />
        <span>Individual package items are managed separately in the Packages section of the dashboard.</span>
      </div>
    </div>
  )
}