"use client"

import React from "react"

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

interface Props {
  value: BlogSectionData
  onChange: (value: BlogSectionData) => void
  showValidation?: 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 BlogSection({ value, onChange, showValidation = false }: Props) {
  function set<K extends keyof BlogSectionData>(key: K, val: BlogSectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-5">
      <div
        className="flex items-start gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
        style={{ background: "rgba(29,45,104,0.04)", borderColor: "rgba(29,45,104,0.12)", color: "var(--brand-navy)" }}
      >
        <svg className="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>
          Blog articles are pulled dynamically from the Articles section. Configure individual articles there.
        </span>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Eyebrow Text</Label>
        <input type="text" value={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Medical Insights" className={fieldClass(showValidation && !value.eyebrow.trim())} />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input type="text" value={value.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Latest Articles & News" className={fieldClass(showValidation && !value.title.trim())} />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Subtitle</Label>
        <textarea value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="A brief subtitle for the blog section..." rows={2} className={`${fieldClass(showValidation && !value.subtitle.trim())} resize-none leading-relaxed`} />
      </div>
    </div>
  )
}