interface EmptyStateProps {
  title?: string
  description?: string
  onClear?: () => void
}

export default function EmptyState({
  title = 'Sin resultados',
  description = 'No se encontraron productos con los filtros seleccionados.',
  onClear,
}: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center py-16 gap-4 text-center">
      <svg
        className="w-16 h-16 text-gray-300"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1}
          d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
        />
      </svg>
      <div>
        <p className="text-[#3d3c3a] font-semibold text-lg">{title}</p>
        <p className="text-gray-500 text-sm mt-1">{description}</p>
      </div>
      {onClear && (
        <button
          type="button"
          onClick={onClear}
          className="px-4 py-2 text-sm font-medium text-[#3d3c3a] border border-[#3d3c3a] rounded-lg hover:bg-[#3d3c3a] hover:text-white transition-colors"
        >
          Limpiar filtros
        </button>
      )}
    </div>
  )
}

