import type * as React from "react"

/** 데스크톱 브라우저 목업 프레임 — 신호등 버튼 + 주소창 + 16:10 워크스페이스. */
function BrowserFrame({ url, children }: { url: string; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-card border border-line-strong shadow-[0_12px_40px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-2xl">
      <div className="bg-fill px-4 py-3.5 flex items-center justify-between border-b border-line-strong">
        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-[#FF5F56] inline-block" />
          <span className="w-3 h-3 rounded-full bg-[#FFBD2E] inline-block" />
          <span className="w-3 h-3 rounded-full bg-[#27C93F] inline-block" />
          <span className="text-[11px] text-ink-muted font-mono ml-3 font-semibold bg-white px-3 py-1 rounded-control border border-line-strong truncate max-w-[180px] sm:max-w-none">
            {url}
          </span>
        </div>
      </div>
      <div className="relative bg-surface aspect-[16/10] flex flex-col justify-center items-center overflow-hidden">{children}</div>
    </div>
  )
}

/** 모바일 폰 목업 프레임 — 노치 포함 9:18 스크린. */
function PhoneFrame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative bg-black rounded-card p-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] border-4 border-line-strong w-full max-w-[290px] aspect-[9/18] overflow-hidden flex flex-col">
      {/* 노치는 화면 '안쪽'에 작은 아일랜드로 — 베젤과 붙으면 검은 덩어리처럼 보인다 */}
      <div className="bg-white rounded-card flex-1 overflow-hidden relative flex flex-col justify-center items-center">
        <div className="absolute top-1 left-1/2 -translate-x-1/2 bg-black/70 h-0.5 w-3.5 rounded-full z-20" />
        {children}
      </div>
    </div>
  )
}

export { BrowserFrame, PhoneFrame }