import React from 'react';
import { Box, Container, Typography, Button, Grid, Card, CardMedia, CardContent, Chip } from '@mui/material';
import { Settings, PlayArrow } from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import Logo from '../components/Logo';

const Movies = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <Container>
      <Box sx={{ py: 2 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h5">{t('movies')}</Typography>
          <Button size="small" startIcon={<Settings fontSize="small" />} onClick={() => navigate('/settings')}>
            Settings
          </Button>
        </Box>
        <Grid container spacing={1.5}>
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <Grid item xs={6} sm={4} md={3} lg={2} key={i}>
              <Card sx={{ cursor: 'pointer', '&:hover': { transform: 'scale(1.02)' }, transition: 'transform 0.2s' }}>
                <Box sx={{ height: 180, bgcolor: 'background.default', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Logo size={80} />
                </Box>
                <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 } }}>
                  <Typography variant="body2" fontWeight={600} noWrap>Movie Title {i}</Typography>
                  <Typography variant="caption" color="text.secondary">2024 • 120 min</Typography>
                  <Box sx={{ mt: 0.5 }}>
                    <Chip label="Action" size="small" sx={{ height: 20, fontSize: '0.65rem' }} />
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>
    </Container>
  );
};

export default Movies;
