import type * as React from "react"

/** 데스크톱 브라우저 목업 프레임 — 신호등 버튼 + 주소창 + 16:10 워크스페이스. */
function BrowserFrame({ url, children }: { url: string; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-2xl 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-md 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-[48px] 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="absolute top-4 left-1/2 -translate-x-1/2 bg-black h-5 w-28 rounded-full z-20 flex items-center justify-around px-4">
        <span className="w-1.5 h-1.5 rounded-full bg-[#1F2022]" />
        <span className="w-10 h-1 bg-[#1F2022] rounded-full" />
      </div>
      <div className="bg-white rounded-[36px] flex-1 overflow-hidden relative flex flex-col justify-center items-center">{children}</div>
    </div>
  )
}

export { BrowserFrame, PhoneFrame }