---
export interface Props {
  href?: string;
  variant?: 'outline' | 'primary';
  size?: 'sm' | 'md' | 'lg';
  class?: string;
}

const {
  href = '/login',
  variant = 'outline',
  size = 'md',
  class: className = '',
}: Props = Astro.props;

const baseClasses = 'login-btn inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer';

const variantClasses = {
  primary: 'bg-primary text-white hover:bg-primary-dark',
  outline: 'border-2 border-[#1e3050] text-[#1e3050] hover:bg-[#1e3050] hover:text-white',
};

const sizeClasses = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
---

<a href={href} class={classes}>
  <div class="login-content">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="login-icon">
      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
      <polyline points="10 17 15 12 10 7"></polyline>
      <line x1="15" y1="12" x2="3" y2="12"></line>
    </svg>
    <span class="login-text">Вход</span>
  </div>
</a>

<style>
  .login-btn {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    text-decoration: none;
  }

  .login-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s ease;
  }

  .login-btn:hover::before {
    left: 100%;
  }

  .login-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .login-icon {
    transition: transform 0.3s ease;
  }

  .login-btn:hover .login-icon {
    transform: translateX(3px);
  }

  .login-text {
    white-space: nowrap;
  }
</style>