import { Box, Card, CardContent, Typography, Grid } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import api from '../lib/api'

interface Character {
    id: number
    name: string
    server: string
    job?: string
    combat_power?: number
}

export default function CharacterHoCharacterHomeworkSelectmeworkSelect() {
    const [characters, setCharacters] = useState<Character[]>([])
    const navigate = useNavigate()

    useEffect(() => {
        const fetchCharacters = async () => {
            try {
                const res = await api.get('/characters')
                setCharacters(res.data)
            } catch (err) {
                console.error('캐릭터 목록을 불러오는 데 실패했습니다.', err)
            }
        }
        fetchCharacters()
    }, [])

    const handleClick = (id: number) => {
        navigate(`/characters/${id}/homeworks`)
    }

    return (
        <Box sx={{ p: 4 }}>
            <Typography variant="h5" gutterBottom>
                내 숙제 관리
            </Typography>
            <Grid container spacing={2}>
                {characters.map((char) => (
                    <Grid item key={char.id} xs={12} sm={6} md={4}>
                        <Card onClick={() => handleClick(char.id)} sx={{ cursor: 'pointer' }}>
                            <CardContent>
                                <Typography variant="h6">{char.name}</Typography>
                                {/* 숙제 목록이 생기면 여기에 출력 */}
                            </CardContent>
                        </Card>
                    </Grid>
                ))}
            </Grid>
        </Box>
    )
}