import * as React from 'react'
import { cn } from '../../lib/utils'

export interface PeriodOption {
  value: string
  label: string
}

export interface PeriodSelectorProps {
  periods?: PeriodOption[]
  selected: string
  onChange: (value: string) => void
  className?: string
}

const DEFAULT_PERIODS: PeriodOption[] = [
  { value: 'week', label: 'Week' },
  { value: 'month', label: 'Month' },
  { value: 'quarter', label: 'Quarter' },
  { value: 'year', label: 'Year' },
]

export function PeriodSelector({
  periods = DEFAULT_PERIODS,
  selected,
  onChange,
  className,
}: PeriodSelectorProps) {
  return (
    <div
      className={cn(
        'flex items-center gap-1 bg-white rounded-lg border border-gray-200 p-1',
        className,
      )}
      role="group"
      aria-label="Time period"
    >
      {periods.map(({ value, label }) => (
        <button
          key={value}
          onClick={() => onChange(value)}
          className={cn(
            'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
            selected === value
              ? 'bg-primary/15 text-primary'
              : 'text-gray-600 hover:bg-gray-100',
          )}
          aria-pressed={selected === value}
        >
          {label}
        </button>
      ))}
    </div>
  )
}