import {
  ExternalLink,
  Loader2,
  Square,
  CircleDot,
  RotateCcw,
} from "lucide-react";
import { Button } from "@/components/ui/button";

export interface PreviewState {
  status: "idle" | "building" | "running" | "failed";
  url?: string;
  onStart: () => void;
  onStop: () => void;
  isStarting: boolean;
  isStopping: boolean;
}

export function PreviewControls({ preview }: { preview: PreviewState }) {
  if (preview.status === "building" || preview.isStarting) {
    return (
      <div className="flex items-center gap-1.5 text-xs text-status-active-fg">
        <Loader2 className="h-3 w-3 animate-spin" />
        <span>Building...</span>
      </div>
    );
  }

  if (preview.status === "running") {
    return (
      <div className="flex items-center gap-1.5">
        <a
          href={preview.url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1 text-xs text-status-success-fg hover:underline"
        >
          <CircleDot className="h-3 w-3" />
          Preview
          <ExternalLink className="h-2.5 w-2.5" />
        </a>
        <Button
          variant="ghost"
          size="sm"
          onClick={preview.onStop}
          disabled={preview.isStopping}
          className="h-6 w-6 p-0"
        >
          <Square className="h-2.5 w-2.5" />
        </Button>
      </div>
    );
  }

  if (preview.status === "failed") {
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={preview.onStart}
        className="h-7 text-xs text-status-error-fg"
      >
        <RotateCcw className="h-3 w-3" />
        Retry Preview
      </Button>
    );
  }

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={preview.onStart}
      disabled={preview.isStarting}
      className="h-7 text-xs"
    >
      <ExternalLink className="h-3 w-3" />
      Preview
    </Button>
  );
}
