import useModalStore from "../stores/useModalStore";
import { Session } from "../types/ISession";
import SessionModal from "./modals/SessionModal";

function SessionCard({ session }: { session: Session }) {
  const { setModal, setPosition } = useModalStore();
  return (
    <div
      className="w-full h-[4.444vw] border-b-1 first:border-t-1 border-[#F6F6F6] flex py-[0.278vw] items-center gap-[0.556vw] cursor-pointer group"
      onClick={() => {
        setModal(<SessionModal session={session} />);
        setPosition("right");
      }}
    >
      <div className="rounded-[1.111vw] w-full h-full flex items-center gap-[0.556vw] group-hover:bg-[#F6F6F6] transition-colors duration-200 px-[1.111vw] py-[0.972vw]">
        <div className="size-[2.5vw] bg-[#F6F6F6] rounded-full"></div>
        <div className="flex flex-col w-full gap-[0.278vw]">
          <p className="button-m font-medium">{session.owner.fullname}</p>
          <p className="caption-s font-medium text-[#7D7D7D]">
            Клиент: {session.client.name}&nbsp;•&nbsp;
            {session.app.name}
          </p>
        </div>
      </div>
    </div>
  );
}

export default SessionCard;