import React from 'react';
import { Box, Button, Grid } from '@/atoms';
import { ChevronLeftIcon, ChevronRightIcon, PaperPlaneIcon } from '@/icon';

interface ReviewQuestionFooterProps {
  index: number;
  onNext: () => void;
  onPrev: () => void;
  isLast: boolean;
  isNextButtonDisabled?: boolean;
  onSubmit: () => void;
  isLoading?: boolean;
}

function ReviewQuestionFooter({
  index,
  onNext,
  onPrev,
  isLast,
  isNextButtonDisabled,
  onSubmit,
  isLoading,
}: ReviewQuestionFooterProps): React.ReactNode {
  return (
    <Grid columns="1fr 1fr" gap="3">
      {index > 0 ? (
        <Button onClick={onPrev} variant="outline">
          <ChevronLeftIcon />
          이전으로
        </Button>
      ) : (
        <Box />
      )}
      {isLast ? (
        <Button disabled={isNextButtonDisabled} loading={isLoading} onClick={onSubmit}>
          <PaperPlaneIcon />
          제출하기
        </Button>
      ) : (
        <Button
          disabled={isNextButtonDisabled}
          onClick={onNext}
          variant="surface"
        >
          <ChevronRightIcon />
          다음으로
        </Button>
      )}
    </Grid>
  );
}

export default ReviewQuestionFooter;
