import React, { FC } from 'react';
import { Card, Avatar, Text } from '@chakra-ui/react';

type ReviewCardProps = {
  firstname: string;
  lastname: string;
  picture: string;
  text: string;
};

export const ReviewCard: FC<ReviewCardProps> = ({
  firstname,
  lastname,
  picture,
  text,
}) => {
  const name = [firstname, lastname].join(' ');

  return (
    <Card p={4} gap={2} alignItems='center' variant='elevated'>
      <Avatar
        name={name}
        src={picture}
        size='xl'
        boxShadow='2px 2px 0 1px var(--chakra-colors-secondary-500)'
      />
      <Text
        as='q'
        fontSize='sm'
        textAlign='center'
        __css={{ textWrap: 'balance' }}
      >
        {text}
      </Text>
    </Card>
  );
};