"use client"
import { useEffect, useRef } from "react"

export function FormErrors({ errors }: { errors: string[] }) {
  const ref = useRef<HTMLDivElement>(null)
  useEffect(() => { if (errors.length) ref.current?.focus() }, [errors])
  if (!errors.length) return null
  return <div ref={ref} tabIndex={-1} role="region" aria-label="Fehler beim Speichern"
    className="max-h-40 shrink-0 overflow-auto rounded-lg border border-destructive p-3 text-sm text-destructive outline-none focus:ring-2 focus:ring-ring">
    <p className="font-semibold">Bitte prüfen Sie Ihre Eingaben.</p>
    <button type="button" className="my-2 underline" onClick={() => ref.current?.closest("form")?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus()}>Zum ersten fehlerhaften Feld</button>
    <ul className="list-disc pl-5">{errors.map((error, index) => <li key={index}>{error}</li>)}</ul>
  </div>
}