import { Button } from '@/components/ui/button';
import { Activity, Download } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { DateRangeKey } from './types';

const RANGES: DateRangeKey[] = ['7d', '30d', '90d', 'ytd'];

interface AnalyticsViewHeaderProps {
  dateRange: DateRangeKey;
  onDateRangeChange: (range: DateRangeKey) => void;
  onExportCsv: () => void;
  onExportJson: () => void;
}

export function AnalyticsViewHeader({
  dateRange,
  onDateRangeChange,
  onExportCsv,
  onExportJson,
}: AnalyticsViewHeaderProps) {
  return (
    <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 border-b border-white/5 pb-8">
      <div>
        <h1 className="text-4xl font-heading text-foreground mb-2 flex items-center gap-3" style={{ fontWeight: 200 }}>
          <Activity className="text-primary w-8 h-8" /> Analytics
        </h1>
        <p className="text-muted-foreground/40 text-xs tracking-[0.15em] uppercase font-heading" style={{ fontWeight: 300 }}>
          Creator Insights
        </p>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <div className="bg-black/40 p-1 rounded-xl border border-white/10 backdrop-blur-md flex">
          {RANGES.map((range) => (
            <button
              key={range}
              type="button"
              onClick={() => onDateRangeChange(range)}
              className={cn(
                'px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all',
                dateRange === range
                  ? 'bg-primary text-black shadow-glow-cyan'
                  : 'text-muted-foreground hover:text-foreground'
              )}
            >
              {range}
            </button>
          ))}
        </div>

        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onExportCsv}
            className="border-white/10 hover:border-primary/50"
          >
            <Download className="w-4 h-4 mr-2" /> CSV
          </Button>
          <Button variant="primary" size="sm" onClick={onExportJson} className="shadow-glow-cyan">
            REPORT
          </Button>
        </div>
      </div>
    </div>
  );
}