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";

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) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} height="500px">
      <div className="glass-panel-strong comments-modal-glass flex flex-col items-center rounded-t-3xl p-4">
        <span className="font-bold">مشخصات ظاهری</span>
        <div className="flex gap-4 max-w-md justify-center w-full mt-8">
          <div className="flex flex-col w-1/2 items-center gap-4">
            <RoundedDiv className="w-full h-8">رنگ چشم</RoundedDiv>
            <Image
              width={70}
              height={70}
              alt="رنگ چشم"
              src={`/images/eyes/${eyeColor}`}
            />
          </div>
          <div className="flex flex-col w-1/2 items-center gap-4">
            <RoundedDiv className="w-full h-8">رنگ مو</RoundedDiv>
            <Image
              width={70}
              height={70}
              alt="رنگ مو"
              src={`/images/hairs/${hairColor}`}
            />
          </div>
        </div>
        <div className="grid grid-cols-3 gap-3 max-w-md justify-center w-full mt-10">
          <RoundedDiv className="h-8">وزن : {weight}</RoundedDiv>
          <RoundedDiv className="h-8">سایز : {size}</RoundedDiv>
          <RoundedDiv className="h-8">قد : {height}</RoundedDiv>
        </div>
        {isMain ? (
          <Link className="block" href={`/offer/${userId}`}>
            <RoundedButton className="h-9 px-5 border-[#0C8002] text-[#0C8002] mt-16">
            ثبت درخواست
            </RoundedButton>
          </Link>
        ) : (
          ""
        )}
      </div>
    </Modal>
  );
}

export default ModelDetailModal;
