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

type ChartToolbarProps = {
  chartType: ChartType;
  timeRange: TimeRange;
  onChartTypeChange: (type: ChartType) => void;
  onTimeRangeChange: (range: TimeRange) => void;
  onExport: () => void;
};

const TIME_RANGES: TimeRange[] = ['1W', '1M', '3M', '1Y', '3Y', '5Y', '10Y', '20Y'];
const CHART_TYPES: { value: ChartType; label: string }[] = [
  { value: 'line', label: 'Line' },
  { value: 'combination', label: 'Compare' }
];

export function ChartToolbar({
  chartType,
  timeRange,
  onChartTypeChange,
  onTimeRangeChange,
  onExport
}: ChartToolbarProps) {
  return (
    <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
      <div className="flex flex-wrap gap-1.5">
        {TIME_RANGES.map((range) => (
          <button
            key={range}
            type="button"
            onClick={() => onTimeRangeChange(range)}
            className={cn(
              'min-h-9 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
              timeRange === range
                ? 'bg-[color:var(--accent)] text-[#16181c]'
                : 'bg-[color:var(--panel-soft)] text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-bright)] hover:text-[color:var(--terminal-bright)]'
            )}
          >
            {range}
          </button>
        ))}
      </div>

      <div className="flex items-center gap-2">
        <div className="flex gap-1">
          {CHART_TYPES.map((type) => (
            <button
              key={type.value}
              type="button"
              onClick={() => onChartTypeChange(type.value)}
              className={cn(
                'rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
                chartType === type.value
                  ? 'bg-[color:var(--accent)] text-[#16181c]'
                  : 'bg-[color:var(--panel-soft)] text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-bright)] hover:text-[color:var(--terminal-bright)]'
              )}
            >
              {type.label}
            </button>
          ))}
        </div>
        <Button
          variant="ghost"
          onClick={onExport}
          className="min-h-9 gap-1.5 px-2.5 py-1.5 text-xs"
        >
          <Download className="h-3.5 w-3.5" />
          Export
        </Button>
      </div>
    </div>
  );
}