"use client"

import React from "react"

export interface HomeHeroData {
  title: string
  description: string
  primaryButtonText: string
  primaryButtonLink: string
}

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

  return (
    <div className="flex flex-col gap-5">
      <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. World-Class Hair Transplant & Medical Aesthetics"
          className={fieldClass(showValidation && !value.title.trim())}
        />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Description</Label>
        <textarea
          value={value.description}
          onChange={(e) => set("description", e.target.value)}
          placeholder="Write a compelling hero description..."
          rows={4}
          className={`${fieldClass(showValidation && !value.description.trim())} resize-none leading-relaxed`}
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <Label>Primary Button Text</Label>
          <input
            type="text"
            value={value.primaryButtonText}
            onChange={(e) => set("primaryButtonText", e.target.value)}
            placeholder="e.g. Get Free Consultation"
            className={fieldClass(showValidation && !value.primaryButtonText.trim())}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Primary Button Link</Label>
          <input
            type="text"
            value={value.primaryButtonLink}
            onChange={(e) => set("primaryButtonLink", e.target.value)}
            placeholder="e.g. /contact"
            className={fieldClass(showValidation && !value.primaryButtonLink.trim())}
          />
        </div>
      </div>
    </div>
  )
}