import { Grid, Typography } from '@mui/material';
import Avatar from '../Avatar/Avatar';
import "./card-section.scss";


export interface CardData {
    id: string,
    logo: string,
    title: string
}

export interface CardProps {
    title: string;
    data: CardData[];
    onClickAvatar: (id: string) => void;
}

const CardSection = ({ title, data, onClickAvatar, ...rest }: CardProps) => {

    const handleClick = (id: string) => {
        onClickAvatar(id);
    };

    return (
        <div className='card-section-container'>
            <Typography className='text-small font-bold text-subtitle'>
                {title}
            </Typography>
            <Grid container className='section-icons'>
                {data.map((d, index) => (
                    <Grid item key={index}>
                        <div className='icon-background'>
                            <Avatar className='icon' id={d.id} onClickAvatar={handleClick} variant='square' src={d.logo} />
                        </div>
                    </Grid>
                ))}
            </Grid>
        </div>

    )
}

export default CardSection;