/* eslint-disable @next/next/no-img-element */
"use client";

import React from "react";

type Props = {
  onClose: () => void;
};

const imgImage1 = "/imgs/image-1.png";
const imgContainer = "/imgs/certificate-container.png";
const img = "/imgs/certificate-asset.svg";
const img1 = "/imgs/certificate-asset-1.svg";

export default function FigmaCertificateContent({ onClose }: Props) {
  return (
    <div
      className="bg-white border border-[#dee1e6] border-solid box-border content-stretch flex flex-col items-center relative rounded-[12px] w-[720px] max-w-[95vw]"
      data-name="Frame"
      data-node-id="388:21934"
      role="dialog"
      aria-modal="true"
    >
      <div
        className="box-border content-stretch flex gap-[10px] items-center overflow-clip p-[24px] relative shrink-0 w-full"
        data-name="header"
        data-node-id="388:21935"
      >
        <div
          className="basis-0 flex flex-col font-['Pretendard:Bold',sans-serif] grow h-[32px] justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[20px]"
          data-node-id="388:21937"
        >
          <p className="leading-[1.5]">수료증</p>
        </div>
        <button
          type="button"
          aria-label="닫기"
          onClick={onClose}
          className="overflow-clip relative shrink-0 size-[24px]"
          data-name="x-close-lg"
          data-node-id="388:21938"
        >
          <div
            className="absolute left-[calc(50%-0.02px)] size-[15.167px] top-[calc(50%-0.02px)] translate-x-[-50%] translate-y-[-50%]"
            data-name="Icon (Stroke)"
            data-node-id="I388:21938;1422:243"
          >
            <div
              className="absolute inset-0"
              style={{ "--fill-0": "rgba(51, 60, 71, 1)" } as React.CSSProperties}
            >
              <img alt="" className="block max-w-none size-full" src={img} />
            </div>
          </div>
        </button>
      </div>

      <div
        className="bg-white border-[#1f2b91] border-[6px] border-solid h-[714px] relative rounded-[12px] shrink-0 w-[506px]"
        data-name="Container"
        data-node-id="388:22388"
      >
        <div
          className="absolute content-stretch flex flex-col gap-[8px] items-center justify-center left-[46px] not-italic text-center text-nowrap top-[92px] w-[418px] whitespace-pre"
          data-node-id="388:22389"
        >
          <p
            className="font-['Pretendard:Regular',sans-serif] leading-[1.4] relative shrink-0 text-[#6c7682] text-[13px]"
            data-node-id="388:22390"
          >
            제 2025-N0055L3
          </p>
          <p
            className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] relative shrink-0 text-[#333c47] text-[40px]"
            data-node-id="388:22391"
          >{`수  료  증`}</p>
        </div>

        <div
          className="absolute content-stretch flex flex-col gap-[4px] items-start left-[46px] top-[216px] w-[418px]"
          data-node-id="388:22392"
        >
          <div
            className="content-stretch flex h-[24px] items-start relative shrink-0 w-full"
            data-name="Container"
            data-node-id="388:22393"
          >
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px] whitespace-pre-wrap">
              {`소          속 :`}
            </p>
            <div className="h-[24px] relative shrink-0 w-[170.297px]" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[170.297px]">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  XR LMS
                </p>
              </div>
            </div>
          </div>

          <div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px] whitespace-pre-wrap">
              {`성          명 :`}
            </p>
            <div className="h-[24px] relative shrink-0 w-[41.531px]" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[41.531px]">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  김하늘
                </p>
              </div>
            </div>
          </div>

          <div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
              생 년 월 일 :
            </p>
            <div className="h-[24px] relative shrink-0 w-[78.281px]" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[78.281px]">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  1994-10-17
                </p>
              </div>
            </div>
          </div>

          <div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
              교 육 과 정 :
            </p>
            <div className="basis-0 grow h-[24px] min-h-px min-w-px relative shrink-0" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-full">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  (2025년) 방사선작업종사자 직장교육(신규) 9월
                </p>
              </div>
            </div>
          </div>

          <div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
              교 육 기 간 :
            </p>
            <div className="h-[24px] relative shrink-0 w-[229.328px]" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[229.328px]">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  2025-09-01 ~ 2025-09-30, 4시간
                </p>
              </div>
            </div>
          </div>

          <div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
            <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
              수 료 일 자 :
            </p>
            <div className="h-[24px] relative shrink-0 w-[84.219px]" data-name="Paragraph">
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[84.219px]">
                <p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
                  2025-09-26
                </p>
              </div>
            </div>
          </div>
        </div>

        <div
          className="absolute content-stretch flex flex-col gap-[24px] items-center left-[94.5px] top-[428px]"
          data-node-id="388:22423"
        >
          <div className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[16px] text-center text-nowrap whitespace-pre">
            <p className="mb-0">위 사람은 우리 협회가 진행한</p>
            <p>
              『(2025년) 방사선작업종사자 직장교육(신규)_9월』
              <br aria-hidden="true" />
              과정을 수료하였으므로 이 수료증을 수여함.
            </p>
          </div>
          <p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
            2025년 10월 21일
          </p>
          <div className="content-stretch flex gap-[8px] items-center relative shrink-0" data-name="logo">
            <div className="h-[36px] relative shrink-0 w-[46.703px]" data-name="image 1">
              <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <img alt="" className="absolute h-[390.71%] left-[-100%] max-w-none top-[-132.02%] w-[301.18%]" src={imgImage1} />
              </div>
            </div>
            <div className="flex flex-col font-['Pretendard:ExtraBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#333c47] text-[24px] text-nowrap">
              <p className="leading-[1.45] whitespace-pre">XR LMS</p>
            </div>
          </div>
        </div>

        <div className="absolute contents left-[26px] top-[662px]">
          <div className="absolute flex h-[28px] items-center justify-center left-[26px] top-[662px] w-[40px]">
            <div className="flex-none scale-y-[-100%]">
              <div className="content-stretch flex flex-col gap-[4px] h-[28px] items-start relative w-[40px]">
                <div className="h-[12px] relative shrink-0 w-[40px]">
                  <div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[40px]">
                    <div
                      className="relative shrink-0 size-[12px]"
                      style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                    >
                      <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                    </div>
                    <div
                      className="relative shrink-0 size-[12px]"
                      style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                    >
                      <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                    </div>
                  </div>
                </div>
                <div
                  className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
                </div>
              </div>
            </div>
          </div>
          <div className="absolute flex h-[28px] items-center justify-center left-[444px] top-[662px] w-[40px]">
            <div className="flex-none scale-y-[-100%]">
              <div className="content-stretch flex flex-col gap-[4px] h-[28px] items-end relative w-[40px]">
                <div className="h-[12px] relative shrink-0 w-[28px]">
                  <div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[28px]">
                    <div
                      className="relative shrink-0 size-[12px]"
                      style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                    >
                      <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                    </div>
                    <div
                      className="basis-0 grow h-[12px] min-h-px min-w-px relative shrink-0"
                      style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                    >
                      <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[12px] w-full" />
                    </div>
                  </div>
                </div>
                <div
                  className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
                </div>
              </div>
            </div>
          </div>
          <div className="absolute h-[2px] left-[86px] top-[690px] w-[338px]">
            <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgContainer} />
          </div>
        </div>

        <div className="absolute contents left-[24px] top-[22px]">
          <div className="absolute content-stretch flex flex-col gap-[4px] h-[28px] items-start left-[24px] top-[24px] w-[40px]">
            <div className="h-[12px] relative shrink-0 w-[40px]">
              <div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[40px]">
                <div
                  className="relative shrink-0 size-[12px]"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                </div>
                <div
                  className="relative shrink-0 size-[12px]"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                </div>
              </div>
            </div>
            <div
              className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
              style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
            >
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
            </div>
          </div>
          <div className="absolute content-stretch flex flex-col gap-[4px] h-[28px] items-end left-[442px] top-[24px] w-[40px]">
            <div className="h-[12px] relative shrink-0 w-[28px]">
              <div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[28px]">
                <div
                  className="relative shrink-0 size-[12px]"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
                </div>
                <div
                  className="basis-0 grow h-[12px] min-h-px min-w-px relative shrink-0"
                  style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
                >
                  <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[12px] w-full" />
                </div>
              </div>
            </div>
            <div
              className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
              style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
            >
              <div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
            </div>
          </div>
          <div className="absolute h-[2px] left-[84px] top-[22px] w-[338px]">
            <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgContainer} />
          </div>
        </div>
      </div>

      <div
        className="box-border content-stretch flex flex-col gap-[32px] h-[96px] items-center p-[24px] relative shrink-0 w-full"
        data-node-id="388:22061"
      >
        <div
          className="basis-0 content-stretch flex gap-[12px] grow items-start justify-center min-h-px min-w-px overflow-clip relative shrink-0 w-full"
          data-name="Actions"
          data-node-id="388:22062"
        >
          <button
            type="button"
            className="bg-white border border-[#8c95a1] border-solid box-border content-stretch flex gap-[4px] h-[48px] items-center justify-center px-[16px] py-[3px] relative rounded-[10px] shrink-0 w-[136px]"
          >
            <div className="relative shrink-0 size-[20px]" data-name="Interface, Essential/download-arrow">
              <div className="absolute inset-[-0.02%]">
                <img alt="" className="block max-w-none size-full" src={img1} />
              </div>
            </div>
            <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
              다운로드
            </p>
          </button>
          <button
            type="button"
            className="bg-[#ecf0ff] box-border content-stretch flex gap-[4px] h-[48px] items-center justify-center px-[16px] py-[8px] relative rounded-[10px] shrink-0 w-[136px]"
          >
            <p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#384fbf] text-[16px] text-center text-nowrap whitespace-pre">
              출력
            </p>
          </button>
        </div>
      </div>
    </div>
  );
}