import React from 'react';
import { AvatarType, StarRating } from '../../atoms';
import { AvatarGroup, Profile } from '../../molecules';

type ReviewProps = {
  profileImage: string;
  userName: string;
  subHeader: string;
  reviewContent: string;
  rating: number;
  likes: AvatarType[];
  setRating?: (value: number) => void;
};

const Review = ({
  profileImage,
  userName,
  subHeader,
  reviewContent,
  rating,
  likes,
  setRating,
}: ReviewProps) => {
  const handleStarClick = (star: number) => {
    setRating && setRating(star);
  };

  return (
    <div className='flex flex-col gap-[10px]'>
      <div className='flex items-center justify-between'>
        <Profile
          profileImage={profileImage}
          userName={userName}
          subheader={subHeader}
        />
        <StarRating rating={rating} setRating={handleStarClick} />
      </div>
      <div className='text-gray-600 p-4 bg-mono-10'>{reviewContent}</div>
      <div className='px-4'>
        <span className='flex items-center gap-2 text-xs text-gray-700'>
          Like
          <AvatarGroup avatars={likes} />
        </span>
      </div>
    </div>
  );
};

export { Review, ReviewProps };
