import clsx from 'clsx';
import React from 'react';

import { ButtonSize, ButtonVariant } from '@/components/button/Button';
import Button from '@/components/button/Button';
import { ChevronRightIcon } from '@/icons';

export const ModalNavigationLabel = ({
  label,
  onClick,
  iconStart,
  className,
}: {
  label: string;
  onClick: () => void;
  iconStart: React.ElementType;
  className?: string;
}) => {
  return (
    <Button
      variant={ButtonVariant.Secondary}
      onClick={onClick}
      className={clsx('h-14 p-3', className)}
      iconStart={iconStart}
      size={ButtonSize.Large}
    >
      <div className='flex w-full items-center justify-between gap-2 text-sm'>
        {label}
        <ChevronRightIcon />
      </div>
    </Button>
  );
};

export default ModalNavigationLabel;