"use client"

export interface HospitalSimilarData {
  eyebrow: string
  title: string
  primaryButtonText: string
  primaryButtonLink: string
}

interface Props {
  value: HospitalSimilarData
  onChange: (value: HospitalSimilarData) => 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 HospitalSimilarSection({ value, onChange }: Props) {
  function set<K extends keyof HospitalSimilarData>(key: K, val: HospitalSimilarData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 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. Explore More" 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. Similar Hospitals" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Primary Button Text</label>
          <input type="text" value={value.primaryButtonText} onChange={(e) => set("primaryButtonText", e.target.value)} placeholder="e.g. View All Hospitals" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Primary Button Link</label>
          <input type="text" value={value.primaryButtonLink} onChange={(e) => set("primaryButtonLink", e.target.value)} placeholder="e.g. /hospitals" className={inputClass} />
        </div>
      </div>
      <div
        className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-sans"
        style={{ background: "rgba(29,45,104,0.05)", borderLeft: "3px solid var(--brand-navy)", color: "var(--brand-navy)" }}
      >
        <span className="w-2 h-2 rounded-full shrink-0" style={{ background: "var(--brand-navy)" }} aria-hidden="true" />
        <span>Similar hospitals are automatically pulled from the database based on category and location.</span>
      </div>
    </div>
  )
}