import clsx from 'clsx'

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

export function PhoneFrame({
  className,
  children,
  ...props
}: React.ComponentPropsWithoutRef<'div'>) {
  return (
    <div className={clsx('relative aspect-[366/729]', className)} {...props}>
      <img
        src={phoneFrame}
        alt=""
        className="pointer-events-none absolute inset-0 w-full h-full"
      />
      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
        {children}
      </div>
    </div>
  )
}