'use client';

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

/**
 * EN: LiveRegion component props
 * VI: Props của component LiveRegion
 */
export interface LiveRegionProps {
  /**
   * EN: Announcement message / VI: Thông báo
   */
  message?: string;
  /**
   * EN: Priority level (polite or assertive) / VI: Mức độ ưu tiên (polite hoặc assertive)
   */
  priority?: 'polite' | 'assertive';
  /**
   * EN: Additional CSS classes / VI: Các class CSS bổ sung
   */
  className?: string;
}

/**
 * EN: LiveRegion component - Announces changes to screen readers
 * VI: Component LiveRegion - Thông báo thay đổi cho screen readers
 *
 * Features:
 * - ARIA live region for announcements
 * - Polite or assertive priority
 * - Hidden visually but accessible to screen readers
 *
 * Tính năng:
 * - Vùng live ARIA cho thông báo
 * - Mức độ ưu tiên polite hoặc assertive
 * - Ẩn về mặt thị giác nhưng có thể truy cập bởi screen readers
 *
 * @example
 * ```tsx
 * <LiveRegion message="New message received" priority="polite" />
 * ```
 */
export function LiveRegion({ message, priority = 'polite', className }: LiveRegionProps) {
  return (
    <div
      role="status"
      aria-live={priority}
      aria-atomic="true"
      className={cn('sr-only', className)}
    >
      {message}
    </div>
  );
}
