tasko/components/form/form-errors.tsx

import { XCircle } from 'lucide-react';

interface FormErrorsProps {
  id: string;
  errors?: Record<string, string[] | undefined>;
}

export const FormErrors = ({ id, errors }: FormErrorsProps) => {
  if (!errors) return null;

  return (
    <div
      id={`${id}-error`}
      aria-live='polite'
      className='mt-2 text-xs text-rose-500'
    >
      {errors?.[id]?.map((error: string) => (
        <div
          key={error}
          className='flex items-center rounded-sm border border-rose-500 bg-rose-500/10 p-2 font-medium'
        >
          <XCircle className='mr-2 h-4 w-4' />
          {error}
        </div>
      ))}
    </div>
  );
};