import { Button } from "@/ui";
import { PlusIcon } from "lucide-react";

export const SimpleEmptyState = ({
  title = "Esto está muy vacío",
  subtitle = "Empieza dando de alta un item",
  buttonText = "Nuevo item",
  onButtonClick = () => {},
  actions = undefined,
}) => {
  return (
    <div className='text-center'>
      <svg
        className='w-12 h-12 mx-auto text-slate-400'
        fill='none'
        viewBox='0 0 24 24'
        stroke='currentColor'
        aria-hidden='true'
      >
        <path
          vectorEffect='non-scaling-stroke'
          strokeLinecap='round'
          strokeLinejoin='round'
          strokeWidth={2}
          d='M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z'
        />
      </svg>
      <h3 className='mt-2 text-lg font-semibold text-slate-900'>{title}</h3>
      <p className='mt-1 text-base text-slate-500'>{subtitle}</p>

      <div className='items-center mt-6'>
        {actions && <>{actions}</>}
        {!actions && (
          <Button className='my-4' onClick={onButtonClick}>
            <PlusIcon />
            {buttonText}
          </Button>
        )}
      </div>
    </div>
  );
};