'use client';

import { Star, Star1 } from 'iconsax-react'
import React from 'react'
import { Slider } from '../ui/slider';

type Props = {
    content?: Array<{ value: string, icon: React.ReactElement }>;
    className?: string;
    name?: string;
    onValueChange?: (value: number[]) => void;
    defaultValue?: number[];
}

const defaultContent: Array<{ value: string, icon: React.ReactElement }> = [
    { value: '5', icon: <Star className='fill-primary dark:fill-foreground me-1 mb-1' size={24} /> },
    { value: '4', icon: <Star className='fill-primary dark:fill-foreground me-1 mb-1' size={24} /> },
    { value: '3', icon: <Star className='fill-primary dark:fill-foreground me-1 mb-1' size={24} /> },
    { value: '2', icon: <Star className='fill-primary dark:fill-foreground me-1 mb-1' size={24} /> },
    { value: '1', icon: <Star className='fill-primary dark:fill-foreground me-1 mb-1' size={24} /> },
]

function RateSelectionBar({ name, content = defaultContent, className = '', onValueChange, defaultValue = [5] }: Props) {
    return (
        <div className={`${className}`}>
            <div className='relative w-full h-3 rounded-full'>
                <Slider
                    min={1}
                    max={content.length}
                    name={name}
                    defaultValue={defaultValue}
                    onValueChange={onValueChange}
                />
            </div>
            <div className="flex justify-between items-center mt-2">
                {content?.map((value, index) => {
                    return (
                        <span key={index} className='flex items-center gap-1'>
                            <Star1 className='fill-primary dark:fill-neutral-200 me-0.5 mb-1' size={12} />
                            <span className='text-xs font-medium'>{value.value}</span>
                        </span>
                    )
                })}
            </div>
        </div>
    )
}

export default RateSelectionBar