'use client';

import { Star1 } from 'iconsax-react'
import React from 'react'
import { useTranslation } from 'react-i18next';

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

function Comment({ user, rating, date, text, tags, positivePoints = [], negativePoints = [], className = '' }: Props) {
    const { t } = useTranslation("rating");

    const getTranslationKey = (point: string, isPositive: boolean): string => {
        const basePath = isPositive ? 'Tabs.Strengths.Options' : 'Tabs.Weeknesses.Options';
        return `${basePath}.${point}`;
    };

    return (
        <div className={className}>
            <div className="flex items-center justify-start">
                <span className="rounded-sm bg-primary dark:bg-foreground h-5 mb-1 w-13 flex items-center justify-center gap-1">
                    <Star1 className='fill-white dark:fill-primary mb-0.5' size={12} />
                    <span className='text-sm2 font-medium text-white dark:text-primary 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>

            {tags.length > 0 && (
                <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] dark:bg-neutral-700 dark:text-disabled-text rounded-sm text-center'>
                            {v}
                        </li>
                    ))}
                </ul>
            )}

            {(positivePoints.length > 0 || negativePoints.length > 0) && (
                <ul className='mt-5 flex flex-wrap items-center justify-start gap-2'>
                    {positivePoints.map((point, i) => (
                        <li key={`positive-${i}`} className='text-xs py-1.5 px-3 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-sm text-center'>
                            {t(getTranslationKey(point, true))}
                        </li>
                    ))}
                    {negativePoints.map((point, i) => (
                        <li key={`negative-${i}`} className='text-xs py-1.5 px-3 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-sm text-center'>
                            {t(getTranslationKey(point, false))}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    )
}

export default Comment