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

import React from "react";

type Props = {
  onClose: () => void;
  learnerName?: string;
  instructorName?: string;
  scoreText?: string;
};

const img = "/imgs/feedback-asset.svg";
const img1 = "/imgs/feedback-asset-1.svg";

export default function FigmaFeedbackContent({
  onClose,
  learnerName = "{학습자명}",
  instructorName = "이공필",
  scoreText = "{점수}",
}: Props) {
  return (
    <div
      className="bg-white border border-[#dee1e6] border-solid box-border content-stretch flex flex-col items-center relative rounded-[12px] w-[640px] max-w-[90vw]"
      data-name="Frame"
      data-node-id="270:9120"
      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="270:9121"
      >
        <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="270:9123"
        >
          <p className="leading-[1.5]">{`${learnerName}님의 피드백`}</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="270:9124"
        >
          <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="I270:9124;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="box-border content-stretch flex flex-col gap-[16px] items-center px-[24px] py-0 relative shrink-0 w-full"
        data-node-id="270:9126"
      >
        <div
          className="bg-gray-50 border border-[#dee1e6] border-solid box-border content-stretch flex flex-col gap-[8px] items-start justify-center p-[24px] relative rounded-[16px] shrink-0 w-full"
          data-node-id="270:9127"
        >
          <div
            className="content-stretch flex gap-[10px] items-center justify-center relative shrink-0"
            data-node-id="270:9128"
          >
            <p
              className="font-['Pretendard:Bold',sans-serif] h-[23px] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[15px] w-full"
              data-node-id="270:9129"
            >
              평가 강사: {instructorName}
            </p>
          </div>
          <p
            className="font-['Pretendard:Regular',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[15px] whitespace-pre-wrap"
            data-node-id="270:9130"
          >
            {`- ${learnerName}님, 총점 ${scoreText}점으로 합격하셨습니다. 학습 흐름이 안정적이며 이해도가 좋습니다.`}
          </p>
        </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="270:9131"
      >
        <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="270:9132"
        >
          <button
            type="button"
            onClick={onClose}
            className="bg-[#1f2b91] box-border content-stretch flex flex-col h-[48px] items-center justify-center px-[16px] py-0 relative rounded-[10px] shrink-0 w-[284px] cursor-pointer"
            data-name="Primary"
            data-node-id="270:9134"
          >
            <div className="h-0 relative shrink-0 w-[82px]" data-name="Min Width" data-node-id="I270:9134;4356:4636">
              <img alt="" className="block max-w-none size-full" src={img1} />
            </div>
            <p
              className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre"
              data-node-id="I270:9134;4356:4637"
            >
              확인
            </p>
          </button>
        </div>
      </div>
    </div>
  );
}


