import React from 'react';
import { NavigationArrowButton } from './styles';

interface NavigationArrowProps {
  direction: 'left' | 'right';
  onClick: () => void;
  disabled: boolean;
}

export const DefaultNavigationArrow: React.FC<NavigationArrowProps> = ({
  direction,
  onClick,
  disabled
}) => (
  <NavigationArrowButton
    direction={direction}
    onClick={onClick}
    disabled={disabled}
    aria-label={`${direction === 'left' ? 'Previous' : 'Next'} items`}
  >
    <svg
      width="24"
      height="24"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d={direction === 'left' ? 'M10 12L6 8L10 4' : 'M6 12L10 8L6 4'}
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </NavigationArrowButton>
);