import Alert from '@/components/Alert';
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
import { useState } from 'react';

/**
 * Alert Unique Error List
 * @param formErrorList - Array of error messages
 * @param onClose - Function to close the alert
 */
const AlertErrorList = ({
  formErrorList,
  onClose,
}: {
  formErrorList: string[];
  onClose: () => void;
}) => {
  if (formErrorList.length === 0) return null;

  return (
    <Alert color='error' className='w-full flex flex-col gap-2 px-4'>
      <div className='flex justify-between items-center gap-2 w-full'>
        <div className='flex items-center gap-2'>
          <Icon icon='material-symbols:error-outline' width={24} height={24} />
          <span className='font-semibold'>
            Terdapat {formErrorList.length} error pada form:
          </span>
        </div>
        <Button
          onClick={onClose}
          variant='link'
          className='ml-auto p-0 w-fit text-white'
          color='none'
        >
          <Icon icon='material-symbols:close' width={24} height={24} />
        </Button>
      </div>
      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
        {formErrorList.map((error, index) => (
          <li key={index} className='text-sm'>
            {error}
          </li>
        ))}
      </ul>
    </Alert>
  );
};

export default AlertErrorList;
