import { Client } from "../types/Client";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import Button from "./Button";
import useModalStore from "../stores/useModalStore";
import ClientModal from "./modals/ClientModal";

function ClientCard({ client }: { client: Client }) {
  const { setModal } = useModalStore();

  return (
    <>
      <Button
        variant="secondary"
        className="w-full"
        onClick={() => setModal(<ClientModal client={client} />)}
      >
        <div className="flex flex-col gap-[0.278vw] w-full text-left h-[2.222vw]">
          <p className="caption-s font-medium text-[#BDBDBD]">Клиент</p>
          <p className="text-s font-medium">{client.name}</p>
        </div>
        <div className="flex gap-[0.556vw] items-center">
          {!client.email && (
            <p className="caption-s font-medium text-[#7B60F3] whitespace-nowrap">
              Добавьте email
            </p>
          )}
          <span className="size-[1.389vw] flex items-center justify-center text-[#7B60F3]">
            <ChevronRightIcon />
          </span>
        </div>
      </Button>
    </>
  );
}

export default ClientCard;