"use client"

import React from "react"

export type ProcedureVideoSectionData = {
  eyebrow: string
  title: string
  subtitle: string
  videoLink: string
}

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

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-green)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Video Section Content</p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label>
            <input
              type="text"
              value={value.eyebrow}
              onChange={(e) => set("eyebrow", e.target.value)}
              placeholder="e.g. Watch More Details"
              className={inputClass}
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Title</label>
            <input
              type="text"
              value={value.title}
              onChange={(e) => set("title", e.target.value)}
              placeholder="e.g. See the Procedure Video"
              className={inputClass}
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Subtitle</label>
            <input
              type="text"
              value={value.subtitle}
              onChange={(e) => set("subtitle", e.target.value)}
              placeholder="e.g. Learn what to expect"
              className={inputClass}
            />
          </div>
        </div>

        <div className="flex flex-col gap-1.5 mt-1">
          <label className="text-xs font-semibold text-foreground font-sans">Video Link</label>
          <input
            type="text"
            value={value.videoLink}
            onChange={(e) => set("videoLink", e.target.value)}
            placeholder="e.g. https://www.youtube.com/watch?v=..."
            className={inputClass}
          />
        </div>
      </div>
    </div>
  )
}