// src/pages/RacetracksPage.jsx
import React from 'react';
import {
    Container,
    Typography,
    Card,
    CardActionArea,
    CardMedia,
    CardContent,
    CardHeader,
    Button,
    Divider,
} from '@mui/material';
import { Link } from 'react-router-dom';
import {places} from "../../../data/constants";

const PlacesPage = () => {
    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            <Typography variant="h4" gutterBottom>
                Список гоночных трасс и картодромов
            </Typography>
            <Divider sx={{ my: 3 }} />
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
                {places.map((track) => (
                    <Card key={track.id} sx={{ width: '300px', height: '100%', p:1}}>
                        <CardActionArea component={Link} to={`/places/${track.id}`}>
                            <CardMedia
                                component="img"
                                height="200"
                                image={track.images[0]}
                                alt={track.name}
                            />
                            <CardHeader title={track.name} />
                            <CardContent>
                                <Typography variant="body2" color="text.secondary">
                                    {track.address ? track.address : 'Нет данных об адресе'}
                                </Typography>
                                <Typography variant="body2" color="text.secondary">
                                    Тип: {track.type}
                                </Typography>
                                {track.capacity && (
                                    <Typography variant="body2" color="text.secondary">
                                        Вместимость: {track.capacity} человек
                                    </Typography>
                                )}
                            </CardContent>
                        </CardActionArea>
                        <Button
                            variant="contained"
                            sx={{ mt: 1 }}
                            component={Link}
                            to={`/places/${track.id}`}
                        >
                            Подробнее
                        </Button>
                    </Card>
                ))}
            </div>
        </Container>
    );
};

export default PlacesPage;
