'use client';

/**
 * AnalyticsHeader — Page heading and period selector for the Analítica page.
 *
 * Displays the "Analítica" heading plus a dropdown to select the active royalty period.
 *
 * Requirements: 8.1, 8.2, 8.3
 */

import type { PortalPeriod } from '@/lib/mock-data/types';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface AnalyticsHeaderProps {
  periods: PortalPeriod[];
  selectedPeriodId: string;
  onPeriodChange: (periodId: string) => void;
}

export default function AnalyticsHeader({
  periods,
  selectedPeriodId,
  onPeriodChange,
}: AnalyticsHeaderProps) {
  const t = useTranslation();

  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <h1 className="text-2xl font-semibold text-divisi-text-primary">
        {t.portal.analitica}
      </h1>

      <div className="flex items-center gap-2">
        <label
          htmlFor="period-selector"
          className="text-sm text-divisi-text-secondary whitespace-nowrap"
        >
          {t.portal.royaltyPeriod}:
        </label>
        <select
          id="period-selector"
          value={selectedPeriodId}
          onChange={(e) => onPeriodChange(e.target.value)}
          className="rounded-lg border border-divisi-border bg-divisi-card px-3 py-2 text-sm text-divisi-text-primary focus:outline-none focus:ring-1 focus:ring-divisi-accent"
        >
          {periods.map((period) => (
            <option key={period.id} value={period.id}>
              {period.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}