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

import phoneFrame from '@/images/phone-frame.svg'

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={phoneFrame}
        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-y-auto bg-gray-900">
        {children}
      </div>
    </div>
  )
}