import styles from "./Card.module.css"
import { dataprops } from '../../types'
import Bar from '../Carasole Bar/Bar/Bar'
import { createRef, useEffect, useRef, useState } from "react";
interface dataprops2 extends dataprops {
    length: number;
    onClick: any;
    current: number;
}
const Card = ({ title, title2, title3, about, length, current, onClick }: dataprops2) => {
    const count = new Array(length).fill(0);
    const [percentage, setpercentage] = useState(0)
    const handlepercentage = () => {
        if (percentage <= 100) {
            setpercentage(prev => prev + 2);
        }
    }

    useEffect(() => {
        const interval = setInterval(handlepercentage, 100);
        return () => {
            return clearInterval(interval)
        }
    }, [title])
    return (
        <div className={styles.card}>
            <div className={styles.title}>

                <h6 className={styles["title-sm"]}>
                    {title}
                </h6>
                <h4 className={styles["title-bg"]}>
                    {title2}
                </h4>

            </div>
            <div className={styles.abouts}>

                <h5 className={styles["title-final"]}>
                    {title3}
                </h5>
                <p className={styles.about}>
                    {about}
                </p>
            </div>
            <div className={styles.wrapper}>
                {
                    count.map((data, index) => {
                        return (
                            <Bar isCurrent={index === current} percentage={percentage} onClick={() => {
                                onClick(index)
                            }} index={index} key={index} />
                        )
                    })
                }
            </div>
        </div>
    )
}

export default Card