import { useState } from 'react';
import { Copy, Check, Play } from 'lucide-react';
import { copyToClipboard } from 'helpers/clipboard';

type CommandBlockProps = {
  label?: string;
  command: string;
  onRun?: (command: string) => void;
};

export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
  const [copied, setCopied] = useState(false);

  const copy = () => {
    copyToClipboard(command);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className="inline-flex flex-col gap-1">
      {label && <span className="text-xs text-duck-dark/50">{label}</span>}
      <div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg pl-3 pr-1 py-1.5">
        <code className="text-sm text-[#e0e0e0] font-mono whitespace-nowrap">{command}</code>
        {onRun && (
          <button
            type="button"
            onClick={() => onRun(command)}
            className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
            title="Run in terminal"
          >
            <Play className="h-3.5 w-3.5 text-duck-teal" />
          </button>
        )}
        <button
          type="button"
          onClick={copy}
          className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
          title="Copy command"
        >
          {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5 text-white/40" />}
        </button>
      </div>
    </div>
  );
};