import { Star1 } from 'iconsax-react'
import React from 'react'

type Props = {
    user: string;
    rating: number;
    date: string;
    text: string;
    tags: Array<string>;
    className?: string;
}

function Comment({ user, rating, date, text, tags, className = '' }: Props) {
    return (
        <div className={className}>
            <div className="flex items-center justify-start">
                <span className="rounded-sm bg-primary h-5 mb-1 w-13 flex items-center justify-center gap-1">
                    <Star1 className='fill-white mb-0.5' size={12} />
                    <span className='text-sm2 font-medium text-white mt-1'>{rating}</span>
                </span>
                <span className='ms-2 text-sm2'>{user}</span>
                <span className='ms-3 mb-1 size-1.5 bg-border rounded-full'></span>
                <span className='ms-3 text-sm2'>{date}</span>
            </div>

            <p className='text-xs mt-3'>
                {text}
            </p>

            <ul className='mt-3 flex flex-wrap items-center justify-start gap-2'>
                {tags.map((v, i) => (
                    <li key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] rounded-sm text-center'>
                        {v}
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default Comment