'use client';

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

type Props = {
    percentage: string;
    content: string;
    className?: string;
}

function RateBar({ percentage, content, className = '' }: Props) {
    return (
        <div className={`flex items-center justify-center ${className}`}>
            <span className='text-xs font-medium text-[#999999] me-3'>{percentage}%</span>
            <span className='mb-1 me-3 relative w-[67px] h-1 bg-border rounded-full'>
                <motion.span
                    animate={{ width: [0, `${percentage}%`] }}
                    className='absolute top-0 left-0 w-[10%] h-1 bg-primary dark:bg-foreground rounded-full'
                >
                </motion.span>
            </span>
            <Star1 className='fill-primary dark:fill-foreground me-1 mb-1' size={12} />
            <span className='text-xs font-medium'>{content}</span>
        </div>
    )
}

export default RateBar