---
interface Props {
  title: string;
  description?: string;
  href: string;
  variant?: 'primary' | 'secondary';
}

const { title, description, href, variant = 'primary' } = Astro.props;
---

<div class="cta">
  <a href={href} class:list={['button', variant]}>{title}</a>
  {description && <p class="description">{description}</p>}
</div>

<style>
  .cta {
    text-align: center;
  }

  .button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .button.primary {
    background: var(--color-accent);
    color: #ffffff;
    border: none;
  }

  .button.primary:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
  }

  .button.secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
  }

  .button.secondary:hover {
    background: var(--color-accent);
    color: #ffffff;
    text-decoration: none;
  }

  .description {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }
</style>