"use client";

import { useState } from "react";

const DEVICES = {
  phone: { width: 390, height: 844 },
  tablet: { width: 820, height: 1180 },
  desktop: { width: 1440, height: 900 }
};

export default function DevicePreview({ url = "http://localhost:3000" }) {

  const [device, setDevice] = useState("phone");

  const size = DEVICES[device];

  return (
    <div className="flex h-full flex-col bg-slate-950">

      <div className="flex items-center gap-2 border-b border-slate-800 p-3">

        <button
          onClick={() => setDevice("phone")}
          className="rounded bg-sky-600 px-3 py-1 text-white">
          Phone
        </button>

        <button
          onClick={() => setDevice("tablet")}
          className="rounded bg-slate-700 px-3 py-1 text-white">
          Tablet
        </button>

        <button
          onClick={() => setDevice("desktop")}
          className="rounded bg-slate-700 px-3 py-1 text-white">
          Desktop
        </button>

      </div>

      <div className="flex flex-1 items-center justify-center overflow-auto bg-slate-900">

        <iframe
          title="Device Preview"
          src={url}
          style={{
            width: size.width,
            height: size.height,
            border: "1px solid #334155",
            borderRadius: "14px",
            background: "#ffffff"
          }}
        />

      </div>

    </div>
  );
}