import { Button } from '@app/client/components/ui/button';
import { Icon, Stack } from '@chakra-ui/react';
import { RatingType } from '@generated/types';

export function RatingPanel({
  personalRating,
  onRatingSet
}: {
  readonly personalRating: RatingType;
  readonly onRatingSet: (rating: RatingType) => Promise<void>;
}) {
  return (
    <Stack direction="row">
      <Button
        size="sm"
        backgroundColor={personalRating === RatingType.Up ? 'green.500/80' : 'green.500'}
        borderColor="green.500"
        onClick={async () => {
          if (personalRating !== RatingType.Up) {
            await onRatingSet(RatingType.Up);
            return;
          }
          await onRatingSet(RatingType.None);
        }}
      >
        <Icon>
          <i className="nf nf-oct-thumbsup" />
        </Icon>
      </Button>
      <Button
        size="sm"
        backgroundColor={personalRating === RatingType.Down ? 'red.500/80' : 'red.500'}
        borderColor="red.500"
        onClick={async () => {
          if (personalRating !== RatingType.Down) {
            await onRatingSet(RatingType.Down);
            return;
          }
          await onRatingSet(RatingType.None);
        }}
      >
        <Icon>
          <i className="nf nf-oct-thumbsdown" />
        </Icon>
      </Button>
    </Stack>
  );
}