import styles from './MySurveysList.module.css'
import {useNavigate} from "react-router-dom";

interface MySurveyItem{
    id: string,
    title: string,
    description: string,
    date: string
    status: 'active' | 'completed'
}

export const MySurveyList = () => {
    const navigate = useNavigate();

    const surveys: MySurveyItem[] = [
        {
            id: '1',
            title: 'Опрос 1',
            description: 'Описание опроса 1',
            date: '27-04-2025',
            status: 'active',
        },
        {
            id: '2',
            title: 'Опрос 2',
            description: 'Описание опроса 2',
            date: '01-01-2025',
            status: 'completed',
        }
    ]

    const handleSurveyClick = (id: string) => {
        navigate(`/survey/${id}/questions`)
    }

    return(
        <div className={styles.main}>
            {surveys.map((survey) => (
                <div
                    key={survey.id}
                    className={styles.survey}
                    onClick={() => handleSurveyClick(survey.id)}
                    role="button"
                    tabIndex={0}
                >
                    <div>
                        <h1 className={styles.title}>{survey.title}</h1>
                        <h2 className={styles.description}>{survey.description}</h2>
                        <span className={styles.date}>Дата создания: {survey.date}</span>
                    </div>
                    <div className={`${styles.status} ${
                        survey.status === 'active' ? styles.active : styles.completed
                    }`}>
                        {survey.status === 'active' ? 'Активен' : 'Завершён'}
                    </div>
                </div>
            ))}
        </div>
    )
}