'use client';

import { SkipBack, SkipForward } from 'lucide-react';
import { IconButton } from './IconButton';

type Props = { direction: 'prev' | 'next'; onClick?: () => void };

export function SkipButton({ direction, onClick }: Props) {
  if (!onClick) return null;
  const Icon = direction === 'prev' ? SkipBack : SkipForward;
  const label = direction === 'prev' ? 'Previous track' : 'Next track';
  return (
    <IconButton label={label} shortcut={direction === 'prev' ? '←' : '→'} onClick={onClick}>
      <Icon size={16} strokeWidth={1.75} />
    </IconButton>
  );
}