import { type FC } from 'react'
import { Star1, DocumentText, Like1, Dislike } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import type { ReviewDetail } from '../types/Types'

interface ReviewContentSectionProps {
    review: ReviewDetail
}

const ReviewContentSection: FC<ReviewContentSectionProps> = ({ review }) => {
    const { t } = useTranslation('global')

    return (
        <div className='space-y-6'>
            <div className='flex items-center gap-3 pb-6 border-b border-border'>
                <div className='flex items-center gap-2'>
                    <Star1 size={24} color="#FFB800" variant="Bold" />
                    <span className='text-2xl font-semibold'>{review.rating}</span>
                </div>
                <span className='text-sm text-gray-500'>از ۵</span>
            </div>

            <div>
                <div className='flex items-center gap-2 mb-4'>
                    <DocumentText size={20} color="#8C90A3" />
                    <span className='text-sm font-medium'>نظر</span>
                </div>
                <div className='bg-gray-50 rounded-xl p-4 border border-border'>
                    <p className='text-sm leading-6 text-gray-700 whitespace-pre-wrap'>
                        {review.comment || 'نظری ثبت نشده است'}
                    </p>
                </div>
            </div>

            {review.positivePoints && review.positivePoints.length > 0 && (
                <div>
                    <div className='flex items-center gap-2 mb-4'>
                        <Like1 size={20} color="#22C55E" />
                        <span className='text-sm font-medium'>نقاط مثبت</span>
                    </div>
                    <div className='flex flex-wrap gap-3'>
                        {review.positivePoints.map((point, index) => (
                            <span
                                key={index}
                                className='px-4 py-2 border border-green-500 text-green-600 rounded-xl text-sm bg-white'
                            >
                                {t(`reviews.${point}`)}
                            </span>
                        ))}
                    </div>
                </div>
            )}

            {review.negativePoints && review.negativePoints.length > 0 && (
                <div>
                    <div className='flex items-center gap-2 mb-4'>
                        <Dislike size={20} color="#EF4444" />
                        <span className='text-sm font-medium'>نقاط منفی</span>
                    </div>
                    <div className='flex flex-wrap gap-3'>
                        {review.negativePoints.map((point, index) => (
                            <span
                                key={index}
                                className='px-4 py-2 border border-red-500 text-red-600 rounded-xl text-sm bg-white'
                            >
                                {t(`reviews.${point}`)}
                            </span>
                        ))}
                    </div>
                </div>
            )}
        </div>
    )
}

export default ReviewContentSection