import type { ReactNode } from "react";

export function PhoneFrame({ title, children }: { title: string; children: ReactNode }) {
  return (
    <div>
      <p className="mb-3 text-center text-sm font-bold text-ink/60 dark:text-paper/60">{title}</p>
      <div className="mx-auto h-[620px] w-[310px] overflow-hidden rounded-[34px] border-[10px] border-ink bg-paper shadow-soft dark:border-black dark:bg-[#10231d]">
        <div className="mx-auto mt-3 h-6 w-28 rounded-full bg-ink/90 dark:bg-black" />
        <div className="h-full p-5">{children}</div>
      </div>
    </div>
  );
}