import styles from "./VolunteersCard.module.css";
import { useNavigate } from "react-router";
import Button from "../../../../components/ui/button/button";
import User from "../../interfaces/user.interface"


interface VolunteersCardProps {
    user: User;
}

export default function VolunteerCard({ user }: VolunteersCardProps) {

    const navigate = useNavigate();

    const handleNavigate = (): void => { navigate(`/profile/${user.id}`) }

    return (
        <div className={`glassCard ${styles.volunteerCard}`}>
            <div className={styles.header}>
                <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
                <p> {user.name} {user.lastname} </p>
            </div>
            <div className={styles.content}>
                <p> {user.email} </p>
                <Button variant={"primary"} onClick={handleNavigate}>Voir</Button>
            </div>
        </div>
    );
}