import { UserSearchIcon } from "lucide-react";

export const CustomerEmptyCard = (props: React.ComponentProps<"button">) => {
  return (
    <button
      tabIndex={0}
      type='button'
      className='group w-full cursor-pointer rounded-lg border border-border bg-card p-4 transition hover:bg-accent/50 hover:border-primary'
      aria-label='Seleccionar cliente'
      {...props}
    >
      <div className='flex items-center gap-4 group-hover:text-primary'>
        <div className='flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15'>
          <UserSearchIcon className='size-6 text-muted-foreground group-hover:text-primary' />
        </div>
        <div className='flex-1 text-left'>
          <h3 className='font-medium text-muted-foreground mb-1 group-hover:text-primary'>
            Seleccionar Cliente
          </h3>
          <p className='text-sm text-muted-foreground/70 group-hover:text-primary'>
            Haz clic para buscar un cliente existente o crear uno nuevo
          </p>
        </div>
      </div>
    </button>
  );
};
