---
interface Props {
  title: string;
  description: string;
  buttonText: string;
  buttonHref: string;
  className?: string;
}

const {
  title = 'Авторизуйтесь, чтобы продолжить',
  description = 'Для продолжения, пожалуйста, войдите в личный кабинет.',
  buttonText = 'Войти в кабинет',
  buttonHref = '/auth/sign-in',
  className = ''
} = Astro.props;
---

<div class={`auth-lock-card ${className}`}>
  <div class="lock-icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
      <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>
  </div>
  <h3 class="lock-title">{title}</h3>
  <p class="lock-text" style={`display: ${description ? 'block' : 'none'}`}>{description}</p>
  <a href={buttonHref} class="auth-button">{buttonText}</a>
</div>

<style>
  .auth-lock-card {
    max-width: 600px;
    margin: 0 auto;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 1.5rem;
    padding: 4rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lock-icon-container {
    width: 5rem;
    height: 5rem;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  }

  .lock-icon { width: 2rem; height: 2rem; }
  .lock-title { color: #1e293b; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
  .lock-text { color: #64748b; line-height: 1.6; margin: 0 0 2rem; max-width: 400px; }

  .auth-button {
    background: #1e293b;
    color: #ffffff;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .auth-button:hover { background: #0f172a; transform: translateY(-2px); }
</style>
