/**
 * PhoneFrame Component
 *
 * iPhone-style bezel wrapper for the video content.
 * Creates a realistic phone "screen recording" aesthetic.
 */

import React from 'react';
import { StatusBar } from './StatusBar';

type PhoneFrameProps = {
  children: React.ReactNode;
};

export const PhoneFrame: React.FC<PhoneFrameProps> = ({ children }) => {
  return (
    <div className="w-full h-full bg-black flex items-center justify-center">
      {/* Phone bezel */}
      <div
        className="relative flex flex-col overflow-hidden"
        style={{
          width: 375,
          height: 812,
          backgroundColor: '#000000',
          borderRadius: 40,
          border: '8px solid #1c1c1e',
        }}
      >
        {/* Dynamic Island */}
        <div className="absolute top-3 left-1/2 -translate-x-1/2 z-20">
          <div
            className="bg-black rounded-full"
            style={{ width: 126, height: 37 }}
          />
        </div>

        {/* Status bar */}
        <div className="flex-shrink-0">
          <StatusBar />
        </div>

        {/* Content area */}
        <div className="flex-1 overflow-hidden bg-black">{children}</div>

        {/* Home indicator */}
        <div className="h-[34px] flex items-center justify-center flex-shrink-0">
          <div
            className="rounded-full bg-white"
            style={{ width: 134, height: 5 }}
          />
        </div>
      </div>
    </div>
  );
};
