import { Globe, RefreshCw, Square, Play } from 'lucide-react';
import { usePreview } from './PreviewContext';

export const PreviewHeader = () => {
  const { slug, url, port, stopped, stopServer, restartServer } = usePreview();

  return (
    <>
      <Globe className="h-3.5 w-3.5 text-duck-teal shrink-0" />
      <span className="text-xs font-medium shrink-0">Preview</span>
      {url && (
        <>
          <button
            type="button"
            onClick={restartServer}
            className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
            title="Refresh"
          >
            <RefreshCw className="h-3 w-3" />
          </button>
          <span className="text-[10px] font-mono truncate opacity-60">{slug}</span>
          {port && <span className="text-[10px] font-mono opacity-40 shrink-0">:{port}</span>}
          <button
            type="button"
            onClick={stopServer}
            className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
            title="Stop server"
          >
            <Square className="h-3 w-3" />
          </button>
        </>
      )}
      {!url && stopped && slug && (
        <button
          type="button"
          onClick={restartServer}
          className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
          title="Start server"
        >
          <Play className="h-3 w-3" />
        </button>
      )}
    </>
  );
};
