"use client"

export interface DoctorBiographyData {
  doctorStatement: string
  biography: string
}

interface Props {
  value: DoctorBiographyData
  onChange: (value: DoctorBiographyData) => void
  invalidDoctorStatement?: boolean
  invalidBiography?: boolean
}

export function DoctorBiography({
  value,
  onChange,
  invalidDoctorStatement = false,
  invalidBiography = false,
}: Props) {
  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-col gap-1.5">
        <label htmlFor="doctor-statement" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Doctor Statement
        </label>
        <input
          id="doctor-statement"
          type="text"
          value={value.doctorStatement}
          onChange={(e) => onChange({ ...value, doctorStatement: e.target.value })}
          placeholder="e.g. Natural results begin with honest consultations."
          className={`w-full bg-card border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors ${
            invalidDoctorStatement
              ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500"
              : "border-border focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
          }`}
        />
        {invalidDoctorStatement && (
          <p className="text-xs font-sans text-red-500">Doctor Statement is required.</p>
        )}
      </div>

      <div className="flex flex-col gap-1">
        <label htmlFor="doctor-biography" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Biography
        </label>
        <p className="text-xs text-muted-foreground font-sans">Long professional background shown on the profile page.</p>
      </div>

      <textarea
        id="doctor-biography"
        value={value.biography}
        onChange={(e) => onChange({ ...value, biography: e.target.value })}
        placeholder="Detailed biography, education highlights, and philosophy..."
        rows={8}
        className={`w-full bg-card border rounded-xl px-4 py-3 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors resize-none leading-relaxed ${
          invalidBiography
            ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500"
            : "border-border focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
        }`}
      />
      {invalidBiography && (
        <p className="text-xs font-sans text-red-500">Biography is required.</p>
      )}
      <div className="flex items-center justify-between">
        <p className="text-xs text-muted-foreground font-sans">Keep it clear and medically accurate.</p>
        <span
          className="text-xs font-semibold font-sans"
          style={{
            color: value.biography.length > 2000 ? "#ef4444" : "var(--muted-foreground)",
          }}
        >
          {value.biography.length} / 2500
        </span>
      </div>
    </div>
  )
}