// code-snippet-block.tsx — 代码片段展示 + 外侧复制按钮 // Logan.Li
import { CopyButton } from '@/components/ui/copy-button';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';

export interface CodeSnippetBlockProps {
  label?: string;
  code: string;
  copyLabel?: string;
  className?: string;
  /** 无密钥等场景禁用复制 // Logan.Li */
  copyDisabled?: boolean;
  copyDisabledTitle?: string;
}

export function CodeSnippetBlock({
  label, code, copyLabel, className, copyDisabled, copyDisabledTitle,
}: CodeSnippetBlockProps) {
  const { t } = useTranslation();
  const resolvedCopyLabel = copyLabel ?? t('common.copied');
  return (
    <div className={cn('space-y-1.5', className)}>
      <div className="flex items-center justify-between gap-2">
        {label ? (
          <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
        ) : (
          <span />
        )}
        <CopyButton
          text={code}
          label={resolvedCopyLabel}
          variant="outline"
          size="sm"
          className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] h-7 px-2"
          disabled={copyDisabled}
          title={copyDisabled ? (copyDisabledTitle || t('ui.codeSnippet.copyDisabled')) : t('common.copy')}
        >
          {t('common.copy')}
        </CopyButton>
      </div>
      <pre className="text-[11px] font-mono text-[var(--dg-text-secondary)] bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-md p-3 overflow-x-auto whitespace-pre-wrap leading-relaxed">
        {code}
      </pre>
    </div>
  );
}