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

interface GostCitationProps {
  citation: string;
  number?: number;
}

export function GostCitation({ citation, number }: GostCitationProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(citation).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  return (
    <div className="group flex items-start gap-3 py-2 px-3 rounded-lg hover:bg-gray-50 transition-colors">
      {number !== undefined && (
        <span className="flex-shrink-0 text-sm text-gray-400 font-mono w-6 pt-0.5 text-right">
          {number}.
        </span>
      )}
      <p className="flex-1 text-sm text-gray-700 leading-relaxed">{citation}</p>
      <button
        onClick={handleCopy}
        className="flex-shrink-0 p-1 rounded text-gray-300 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all"
        title="Копировать"
      >
        {copied ? (
          <Check className="w-4 h-4 text-green-500" />
        ) : (
          <Copy className="w-4 h-4" />
        )}
      </button>
    </div>
  );
}