"use client"

import Link from "next/link"
import { Icon } from "@iconify/react"
import { cn } from "@/lib/utils"

type ProductDemoFrameProps = {
  fakeUrl: string
  hint?: string
  fullscreenHref?: string
  heightClass?: string
  /** Rapport largeur/hauteur de la zone contenu (ex. 1440/900). Prioritaire sur heightClass. */
  aspectRatio?: number
  children: React.ReactNode
  className?: string
}

export function ProductDemoFrame({
  fakeUrl,
  hint,
  fullscreenHref,
  heightClass = "h-[22rem] sm:h-[26rem] lg:h-[28rem]",
  aspectRatio,
  children,
  className,
}: ProductDemoFrameProps) {
  return (
    <div className={cn("flex flex-col gap-3", className)}>
      <div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
        <div className="flex items-center gap-1.5 px-3 py-2.5">
          <span className="size-2.5 rounded-full bg-[#ff5f57]" aria-hidden />
          <span className="size-2.5 rounded-full bg-[#febc2e]" aria-hidden />
          <span className="size-2.5 rounded-full bg-[#28c840]" aria-hidden />
          <div className="ml-3 flex h-7 min-w-0 flex-1 items-center gap-2 rounded-full bg-[var(--landing-chip)] px-3 text-xs text-[var(--landing-muted)]">
            <Icon icon="mdi:lock-outline" className="size-3.5 shrink-0" aria-hidden />
            <span className="truncate">{fakeUrl}</span>
          </div>
          {fullscreenHref ? (
            <Link
              href={fullscreenHref}
              target="_blank"
              rel="noopener noreferrer"
              className="flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-[var(--landing-muted)] transition-colors hover:bg-[var(--landing-chip)] hover:text-[var(--landing-fg)]"
              title="Ouvrir la démo en plein écran"
            >
              <Icon icon="mdi:open-in-new" className="size-4" aria-hidden />
              <span className="hidden sm:inline">Plein écran</span>
            </Link>
          ) : null}
        </div>
        <div
          className={cn(
            "relative w-full overflow-hidden border-t border-[var(--landing-line)] bg-[var(--landing-bg)]",
            aspectRatio ? undefined : heightClass
          )}
          style={aspectRatio ? { aspectRatio } : undefined}
        >
          {children}
        </div>
      </div>
      {hint ? (
        <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
          <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
          {hint}
        </p>
      ) : null}
    </div>
  )
}