import Image from 'next/image'
import clsx from 'clsx'

export function PhoneFrame({
  className,
  children,
  priority = false,
  ...props
}: React.ComponentPropsWithoutRef<'div'> & { priority?: boolean }) {
  return (
    <div className={clsx('relative aspect-[366/729]', className)} {...props}>
      <Image
        src="/images/phone-frame.svg"
        alt=""
        className="pointer-events-none absolute inset-0"
        fill
        priority={priority}
      />
      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
        {children}
      </div>
    </div>
  )
}
