graff-mate-client/src/components/modals/SessionModal.tsx

import { Session } from "../../types/ISession";
import { format } from "date-fns";
import { ru } from "date-fns/locale";
import getIntervalDuration from "../../utils/interval-duration";
import MagicIcon from "../icons/MagicIcon";
import NewButton from "../NewButton";
import ChevronRightIcon from "../icons/ChevronRightIcon";
import Badge from "../Badge";
import ClientCard from "../ClientCard";
import DownloadIcon from "../icons/DownloadIcon";
import ShareIcon from "../icons/ShareIcon";
import SessionComments from "../SessionComments";

function SessionModal({ session }: { session: Session }) {
  return (
    <div className="bg-[#FFFFFF] w-[49.722vw] rounded-[2.222vw]">
      <div className="w-full flex justify-center items-center h-[4.861vw]">
        <div className="title-s flex font-medium">
          <p>{format(session.createdAt, "dd MMMM yyyy", { locale: ru })}</p>
          <p>,&nbsp;{format(session.createdAt, "HH:mm")}</p>
        </div>
      </div>
      <div className="bg-[#F0F0F0] flex h-[calc(100vh-8.861vw)] overflow-hidden rounded-b-[2.222vw]">
        <div className="flex-1 flex flex-col gap-[0.833vw] px-[1.111vw] overflow-y-auto pr-[0.556vw] pb-[1.111vw] [scrollbar-width:thin]">
          <div className="flex flex-col gap-[0.556vw] justify-center items-center pt-[1.111vw]">
            <div className="size-[3.333vw] rounded-full bg-white"></div>
            <div className="flex flex-col gap-[0.278vw] items-center">
              <p className="title-s font-medium">{session.owner.fullname}</p>
              <p className="caption-s text-[#BDBDBD] font-medium">
                Продолжительность:{" "}
                {getIntervalDuration(session.createdAt, session.updatedAt)}
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
            <h3 className="title-s font-medium">Информация о сеансе</h3>
            <div className="flex flex-col gap-[0.556vw]">
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Сценарии:
                </span>
                <span className="caption-s font-medium">Добавить в бэкенд</span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Интерактивный стол:
                </span>
                <span className="caption-s font-medium">
                  {session.server.name}
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Продолжительность сеанса:
                </span>
                <span className="caption-s font-medium">
                  {getIntervalDuration(session.createdAt, session.updatedAt)}
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Проект:
                </span>
                <span className="caption-s font-medium">
                  {session.app.name}
                </span>
              </p>
            </div>
            <ClientCard client={session.client} />
          </div>
          <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
            <h3 className="title-s flex font-medium">
              Речевая&nbsp;
              <span className="text-[#7B60F3] flex">
                аналитика&nbsp;
                <span className="w-[1.389vw] h-[1.389vw] text-[#7B60F3]">
                  <MagicIcon />
                </span>
              </span>
            </h3>
            <div className="flex flex-col gap-[0.556vw]">
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Эффективность встречи:
                </span>
                <span className="caption-s font-medium text-[#29AF61]">
                  Высокая
                </span>
              </p>
              <p className="flex gap-[0.556vw]">
                <span className="caption-s font-medium text-[#BDBDBD]">
                  Бюджет клиента:
                </span>
                <span className="caption-s font-medium">8 500 000 ₽</span>
              </p>
            </div>
            <div className="bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] py-[0.833vw] text-xs tracking-[-0.02em] leading-[110%]">
              Клиент проявил высокий интерес к объекту, особенно к варианту с
              улучшенной отделкой. Основной вопрос для принятия решения —
              согласование с семьей и выбор этажа. Необходимо подготовить
              предварительный договор к следующей встрече.
            </div>
            <NewButton variant="primary" size="large">
              Весь отчет по встрече
              <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                <ChevronRightIcon />
              </span>
            </NewButton>
          </div>
          <div className="flex flex-col gap-[1.111vw] bg-white rounded-[1.667vw] p-[1.111vw]">
            <h3 className="title-s flex items-center font-medium gap-[0.556vw]">
              <span>Документы по сеансу</span> <Badge count={4} />
            </h3>
            <div className="flex w-full gap-[0.556vw]">
              <NewButton variant="primary" size="large" className="w-full">
                <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                  <DownloadIcon />
                </span>
                Скачать архивом
              </NewButton>
              <NewButton variant="primary" size="large">
                <span className="w-[1.111vw] h-[1.111vw] text-[#7B60F3]">
                  <ShareIcon />
                </span>
              </NewButton>
            </div>
          </div>
        </div>
        <SessionComments sessionId={session.id} />
      </div>
    </div>
  );
}

export default SessionModal;