"use client";

import React from "react";
import Modal from "../elements/Modal";
import Image from "next/image";
import RoundedDiv from "../elements/RoundedDiv";
import RoundedButton from "../elements/RoundedButton";
import Link from "next/link";
import { useTranslation } from "react-i18next";

type StrNullUnd = string | null | undefined;

type ModelModalProps = {
  isOpen: boolean;
  onClose: () => void;
  userId: string;
  hairColor: StrNullUnd;
  eyeColor: StrNullUnd;
  height: StrNullUnd;
  size: StrNullUnd;
  weight: StrNullUnd;
  isMain?: boolean;
};

function ModelDetailModal({
  userId,
  isOpen,
  onClose,
  hairColor,
  eyeColor,
  height,
  size,
  weight,
  isMain,
}: ModelModalProps) {
  const { t } = useTranslation("common");

  return (
    <Modal isOpen={isOpen} onClose={onClose} height="500px">
      <div className="flex flex-col items-center p-4">
        <span className="font-bold">{t("models.appearanceDetails")}</span>
        <div className="mt-8 flex w-full max-w-md justify-center gap-4">
          <div className="flex w-1/2 flex-col items-center gap-4">
            <RoundedDiv className="h-8 w-full">{t("models.eyeColorLabel")}</RoundedDiv>
            <Image
              width={70}
              height={70}
              alt={t("models.eyeColorLabel")}
              src={`/images/eyes/${eyeColor}`}
            />
          </div>
          <div className="flex w-1/2 flex-col items-center gap-4">
            <RoundedDiv className="h-8 w-full">{t("models.hairColorLabel")}</RoundedDiv>
            <Image
              width={70}
              height={70}
              alt={t("models.hairColorLabel")}
              src={`/images/hairs/${hairColor}`}
            />
          </div>
        </div>
        <div className="mt-10 grid w-full max-w-md grid-cols-3 justify-center gap-3">
          <RoundedDiv className="h-8">{t("models.weight")} {weight}</RoundedDiv>
          <RoundedDiv className="h-8">{t("models.size")} {size}</RoundedDiv>
          <RoundedDiv className="h-8">{t("models.height")} {height}</RoundedDiv>
        </div>
        {isMain ? (
          <Link className="mt-16 block" href={`/offer/${userId}`}>
            <RoundedButton variant="primary" className="h-9 px-5">
              {t("models.submitRequest")}
            </RoundedButton>
          </Link>
        ) : null}
      </div>
    </Modal>
  );
}

export default ModelDetailModal;
