import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

export interface PeriodOption {
  value: string;
  label: string;
  icon?: ReactNode;
}

interface PeriodSelectorProps {
  options: PeriodOption[];
  selectedValue: string;
  onValueChange: (value: string) => void;
  className?: string;
}

export function PeriodSelector({
  options,
  selectedValue,
  onValueChange,
  className,
}: PeriodSelectorProps) {
  return (
    <div
      className={cn(
        'flex bg-[var(--card)] border border-[var(--border)] rounded-lg p-1',
        className
      )}
    >
      {options.map((option) => (
        <button
          key={option.value}
          onClick={() => onValueChange(option.value)}
          className={cn(
            'px-3 py-1 text-sm rounded transition-all flex items-center gap-1',
            selectedValue === option.value
              ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
              : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)]'
          )}
        >
          {option.icon && <span>{option.icon}</span>}
          <span>{option.label}</span>
        </button>
      ))}
    </div>
  );
}
