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>
  );
}