'use client';

import React from 'react';
import Link from 'next/link';
import styles from './page.module.css';
import { useLocale } from '@/lib/i18n/LocaleContext';

export default function UnauthorizedPage() {
  const { t } = useLocale();

  return (
    <div className={styles.container}>
      <div className={styles.card}>
        <div className={styles.iconContainer}>
          <svg
            className={styles.icon}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            />
          </svg>
        </div>
        <h1 className={styles.title}>{t('errors.unauthorizedTitle')}</h1>
        <p className={styles.description}>{t('errors.unauthorizedDescription')}</p>
        <Link href="/plans" className={styles.button}>
          {t('errors.unauthorizedBtn')}
        </Link>
      </div>
    </div>
  );
}
