'use client';

import * as React from 'react';
import { cn } from '@/shared/lib/utils';

/**
 * EN: SkipToContent component - Skip link for keyboard navigation
 * VI: Component SkipToContent - Link bỏ qua cho điều hướng bàn phím
 *
 * Features:
 * - Appears on focus (keyboard navigation)
 * - Links to main content area
 * - WCAG 2.1 AA compliant
 *
 * Tính năng:
 * - Xuất hiện khi focus (điều hướng bàn phím)
 * - Link đến khu vực nội dung chính
 * - Tuân thủ WCAG 2.1 AA
 */
export function SkipToContent() {
  return (
    <a
      href="#main-content"
      className={cn(
        // EN: Hidden by default, visible on focus / VI: Ẩn mặc định, hiện khi focus
        'sr-only focus:not-sr-only',
        'fixed top-4 left-4 z-[100]',
        'px-4 py-2',
        'bg-accent-primary text-white',
        'rounded-md',
        'font-medium text-sm',
        'shadow-lg',
        'focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2',
        'transition-all duration-[150ms]'
      )}
      aria-label="Skip to main content / Bỏ qua đến nội dung chính"
    >
      Skip to content / Bỏ qua đến nội dung
    </a>
  );
}
