"use client"

export interface ProcedureRelatedData {
  eyebrow: string
  title: string
  buttonText: string
  buttonLink: string
}

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

const inputClass =
  "w-full bg-card border border-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 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

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

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <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. Related Procedures" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Button Text</label>
          <input type="text" value={value.buttonText} onChange={(e) => set("buttonText", e.target.value)} placeholder="e.g. View All Procedures" className={inputClass} />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Button Link</label>
          <input type="text" value={value.buttonLink} onChange={(e) => set("buttonLink", e.target.value)} placeholder="e.g. /procedures" className={inputClass} />
        </div>
      </div>
    </div>
  )
}