import React, {useState} from "react";
import styles from "./VolunteersPage.module.css";
import formatDate from "../../utils/date/formatDate.js";
import { useNavigate } from "react-router";
import Button from "../../components/ui/button/button.jsx";

export default function VolunteerCard({ user }) {

    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    const navigate = useNavigate();

    return (
        <div className={`${styles.profileboard} glassCard`}>

            <div className={styles.header}>
                <h2>{user?.name} {user?.lastname}</h2>
                 <Button
                    variant={"transparent"}
                    onClick={toggleExpand}
                    className={`${isExpanded ? styles.moreButtonClicked : ""}`}
                >
                    {">"}
                </Button>
            </div>

            <div className={styles.mainContent}>
                {!isExpanded ? (
                    <div className={styles.basicInfo}>
                        <p><strong>Rôle :</strong> {user?.role}</p>
                        <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
                    </div>
                ) : (
                    <div className={styles.expandedContent}>
                        <div className={styles.profilePictureContainer}>
                            <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
                        </div>

                        <div className={styles.textInfo}>
                            <div className={styles.basicInfo}>
                                <p><strong>Rôle :</strong> {user?.role}</p>
                                <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
                            </div>

                            <div className={styles.contactInfo}>
                                <p><strong>Email :</strong> {user?.email}</p>
                                {user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {isExpanded && (
                <div className={styles.bottomBar}>
                    <Button
                        onClick={() => navigate(`/profile/${user.id}`)}
                        variant="primary"
                    >
                        Voir plus
                    </Button>
                </div>
            )}

        </div>
    );



}