import { Avatar } from '@app/client/components/ui/avatar';
import { toFormattedDate } from '@app/client/helpers';
import { Box, Card, Stack, Text } from '@chakra-ui/react';
import { Link } from '@tanstack/react-router';

export function ReviewCard({
  review
}: {
  readonly review: {
    readonly id: string;
    readonly username: string;
    readonly createdAt: string;
    readonly text: string;
  };
}) {
  return (
    <Stack direction="row" alignItems="start">
      <Link to={`/profile/${review.username}`}>
        <Avatar size="sm" fallback={review.username[0]} />
      </Link>
      <Card.Root variant="subtle" width="100%">
        <Card.Body paddingX="3" paddingY="1">
          <Stack direction="row" justifyContent="space-between" alignItems="center" gap={1}>
            <Link to={`/profile/${review.username}`}>
              <Text
                color="colorPalette.400"
                _hover={{
                  textDecoration: 'underline',
                  textDecorationColor: 'colorPalette.700'
                }}
              >
                {review.username}
              </Text>
            </Link>

            <Text color="fg.muted">{toFormattedDate({ value: review.createdAt })}</Text>
          </Stack>
          <Box width="100%" position="relative" padding={0}>
            <Text>{review.text}</Text>
            {/* <Button */}
            {/*   size="sm" */}
            {/*   position="absolute" */}
            {/*   right="2px" */}
            {/*   bottom="5px" */}
            {/*   padding={0} */}
            {/*   variant="ghost" */}
            {/*   // onClick={async () => onReviewSubmit(text)} */}
            {/* ></Button> */}
          </Box>
        </Card.Body>
      </Card.Root>
    </Stack>
  );
}