---
interface Props {
  command: string;
  path?: string;
  clickable?: boolean;
  href?: string;
  typing?: boolean;
  promptId?: string;
}

const { command, path = '~/', clickable = false, href = '/', typing = true, promptId = '' } = Astro.props;
const uniqueId = Math.random().toString(36).slice(2, 11);
---

<div
  class:list={['command-prompt', { clickable }]}
  data-command={command}
  data-typing={typing}
  data-id={uniqueId}
  data-prompt-id={promptId || undefined}
>
  {clickable ? (
    <a href={href} class="prompt-link">
      <span class="prompt">user@blog</span>
      <span class="separator">:</span>
      <span class="path">{path}</span>
      <span class="suffix">$</span>
      <span class="command-text ml-2" id={`cmd-${uniqueId}`}>{command}</span>
      <span class="cursor" id={`cursor-${uniqueId}`}>_</span>
    </a>
  ) : (
    <>
      <span class="prompt">user@blog</span>
      <span class="separator">:</span>
      <span class="path">{path}</span>
      <span class="suffix">$</span>
      <span class="command-text ml-2" id={`cmd-${uniqueId}`}>{command}</span>
      <span class="cursor" id={`cursor-${uniqueId}`}>_</span>
    </>
  )}
</div>

<style>
  .command-prompt {
    display: flex;
    align-items: center;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }

  .prompt {
    color: var(--primary);
  }

  .separator {
    color: var(--text);
  }

  .path {
    color: var(--secondary);
  }

  .suffix {
    color: var(--text);
    margin-left: 0.25rem;
  }

  .command-text {
    color: var(--secondary);
    min-height: 1.2em;
  }

  .cursor {
    color: var(--text);
    margin-left: 0.25rem;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .clickable {
    cursor: pointer;
  }

  .prompt-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
  }

  .clickable:hover .prompt-link {
    transform: translateX(0.25rem);
  }

  .clickable:hover .prompt {
    color: var(--secondary);
  }

  .clickable:hover .command-text {
    color: var(--primary);
  }
</style>
