'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface DurationSelectorProps {
  value: number;
  onChange: (bars: number) => void;
  className?: string;
}

const presets = [8, 16, 32, 64];

export function DurationSelector({ value, onChange, className }: DurationSelectorProps) {
  return (
    <div className={cn('flex items-center gap-1', className)}>
      <span className="text-xs text-muted-foreground mr-1">Duration:</span>
      {presets.map((bars) => (
        <Button
          key={bars}
          variant={value === bars ? 'default' : 'outline'}
          size="sm"
          className="h-6 px-2 text-xs"
          onClick={() => onChange(bars)}
        >
          {bars}
        </Button>
      ))}
      <span className="text-xs text-muted-foreground ml-1">bars</span>
    </div>
  );
}