"use client";

import React from "react";
import { cn } from "@/lib/utils";

/**
 * Precision iPhone device frame vector bezel matching ringg.ai's 433/882 chassis.
 */
export function PhoneDeviceFrame({
  children,
  className,
  style,
}: {
  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}) {
  return (
    <div
      className={cn(
        "relative inline-block w-full select-none align-middle leading-none drop-shadow-[0_20px_40px_rgba(0,0,0,0.14)]",
        className,
      )}
      style={{ aspectRatio: "433 / 882", ...style }}
    >
      {/* Screen viewport — flex column so inner UI fills the full screen height */}
      <div
        className="absolute z-10 flex flex-col overflow-hidden bg-background"
        style={{
          left: "4.9076%",
          top: "2.1825%",
          width: "89.9538%",
          height: "95.6349%",
          borderRadius: "14.31% / 6.61%",
        }}
      >
        {children}
      </div>

      {/* SVG Bezel and Dynamic Island Overlay */}
      <svg
        viewBox="0 0 433 882"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="pointer-events-none absolute inset-0 z-20 size-full"
        aria-hidden="true"
      >
        {/* Outer Frame Border */}
        <rect
          x="2.5"
          y="2.5"
          width="428"
          height="877"
          rx="58"
          stroke="currentColor"
          strokeWidth="5"
          className="text-[#1a1a1c] dark:text-[#333338]"
        />
        {/* Inner Border Rim */}
        <rect
          x="19"
          y="17"
          width="395"
          height="848"
          rx="43.5"
          stroke="currentColor"
          strokeWidth="2.5"
          className="text-[#2b2b30] dark:text-[#222226]"
        />
        {/* Dynamic Island Pill */}
        <rect
          x="151"
          y="26"
          width="131"
          height="35"
          rx="17.5"
          className="fill-[#020202]"
        />
        {/* Camera lens reflection */}
        <circle cx="260" cy="43.5" r="5.5" className="fill-[#1F1C1A]" />
        <circle cx="260" cy="43.5" r="2" className="fill-[#020202]" />
      </svg>
    </div>
  );
}