import { Check, Copy, Download, X } from 'lucide-react';

interface Props {
  title: string;
  defaultTitle: string;
  onDownload: () => void;
  downloadDisabled: boolean;
  onClose: () => void;
  // Optional copy button (Markdown pane only; HTML pane omits it).
  onCopy?: () => void;
  justCopied?: boolean;
  copyDisabled?: boolean;
}

export function ArtifactPaneHeader({
  title,
  defaultTitle,
  onDownload,
  downloadDisabled,
  onClose,
  onCopy,
  justCopied,
  copyDisabled,
}: Props) {
  return (
    <div className="flex items-center gap-2 border-b border-border bg-muted/30 px-2 py-1 shrink-0">
      <span className="text-xs text-muted-foreground truncate flex-1" title={title}>
        {title || defaultTitle}
      </span>
      {onCopy && (
        <button
          type="button"
          onClick={onCopy}
          disabled={copyDisabled}
          className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
          aria-label="Copy source"
          title="Copy"
        >
          {justCopied ? <Check size={12} /> : <Copy size={12} />}
        </button>
      )}
      <button
        type="button"
        onClick={onDownload}
        disabled={downloadDisabled}
        className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 max-md:min-h-[44px] max-md:min-w-[44px]"
        aria-label="Download"
        title="Download"
      >
        <Download size={12} />
      </button>
      <button
        type="button"
        onClick={onClose}
        className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
        aria-label="Close artifact pane"
        title="Close"
      >
        <X size={12} />
      </button>
    </div>
  );
}