'use client';

import { useEffect, useState } from 'react';

interface Props {
  code: string;
}

export default function HtmlPreview({ code }: Props) {
  const [previewCode, setPreviewCode] = useState(code);

  // Debounce the preview update to avoid iframe thrashing
  useEffect(() => {
    const timer = setTimeout(() => setPreviewCode(code), 500);
    return () => clearTimeout(timer);
  }, [code]);

  return (
    <div className="flex flex-col border-t border-zinc-700">
      <div className="flex items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 py-2">
        <span className="text-xs font-sans font-medium uppercase tracking-wider text-zinc-400">Preview</span>
        <div className="ml-auto flex gap-1">
          <div className="h-2.5 w-2.5 rounded-full bg-red-500/60" />
          <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/60" />
          <div className="h-2.5 w-2.5 rounded-full bg-green-500/60" />
        </div>
      </div>
      <iframe
        srcDoc={previewCode}
        sandbox="allow-scripts"
        className="h-48 w-full bg-white"
        title="HTML Preview"
      />
    </div>
  );
}