---
interface Props {
  code: string;
  language?: string;
  class?: string;
}

const { code, language = 'bash', class: className = '' } = Astro.props;

// Simple syntax highlighting classes
const languageColors: Record<string, string> = {
  bash: 'text-[var(--primary)]',
  javascript: 'text-[#f7df1e]',
  typescript: 'text-[#3178c6]',
  python: 'text-[#3776ab]',
  rust: 'text-[#dea584]',
  go: 'text-[#00add8]',
  html: 'text-[#e34c26]',
  css: 'text-[#264de4]',
  json: 'text-[var(--secondary)]',
};

const langColor = languageColors[language] || 'text-[var(--text)]';
---

<div class={`rounded-lg overflow-hidden bg-[var(--code-bg)] border border-[var(--border-color)] ${className}`}>
  <!-- Code header -->
  <div class="flex items-center justify-between px-3 py-2 border-b border-[var(--border-color)] bg-[var(--header-bg)]">
    <span class="text-xs text-[var(--text-secondary)] font-mono uppercase">{language}</span>
    <button 
      class="text-xs text-[var(--text-tertiary)] hover:text-[var(--primary)] transition-colors"
      onclick={`navigator.clipboard.writeText(\`${code.replace(/\\/g, '\\\\').replace(/`/g, '\\`')}\`)`}
    >
      <i class="fas fa-copy mr-1"></i>
      Copy
    </button>
  </div>
  
  <!-- Code content -->
  <pre class="p-3 overflow-x-auto"><code class={`font-mono text-sm ${langColor} whitespace-pre`}>{code}</code></pre>
</div>