import { X } from 'lucide-react'
import type React from 'react'

type InstructorStudioNoticeModalProps = {
  sidebarCollapsed: boolean
  onClose: () => void
}

export default function InstructorStudioNoticeModal({
  sidebarCollapsed,
  onClose
}: InstructorStudioNoticeModalProps): React.JSX.Element {
  return (
    <div
      className={[
        'fixed bottom-0 right-0 top-[38px] z-[70] grid place-items-center bg-[#080a10]/40 p-6 backdrop-blur-[3px]',
        sidebarCollapsed ? 'left-[68px]' : 'left-[240px]'
      ].join(' ')}
    >
      <section className="w-full max-w-[430px] overflow-hidden rounded-xl border border-[#dfe3ed] bg-white shadow-[0_28px_80px_rgba(8,10,16,0.30)]">
        <header className="flex items-start justify-between gap-4 border-b border-[#e5e8ef] px-6 pb-4 pt-5">
          <div>
            <span className="text-[12px] font-medium text-[#6f4df6]">개발 스튜디오</span>
            <h2 className="mt-1 text-[21px] font-bold leading-tight text-[#111520]">강사 계정은 이용할 수 없습니다</h2>
          </div>
          <button
            type="button"
            aria-label="닫기"
            onClick={onClose}
            className="grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
          >
            <X size={17} />
          </button>
        </header>

        <div className="px-6 py-5">
          <p className="text-[14px] font-medium leading-relaxed text-[#4f596b]">
            개발 스튜디오는 수강생 실습용 화면입니다. 강사 계정은 강사포털에서 수강생 관리, 채팅, 학습 진행 현황을 확인해 주세요.
          </p>
          <button
            type="button"
            onClick={onClose}
            className="mt-5 flex h-10 w-full cursor-pointer items-center justify-center rounded-md bg-[#714ef6] text-[14px] font-bold text-white transition hover:bg-[#6040df]"
          >
            확인
          </button>
        </div>
      </section>
    </div>
  )
}