'use client';

import { Box, Typography, Grid, Card, CardContent, Button } from '@mui/material';
import { Add, ChildCare } from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function ChildrenPage() {
  const router = useRouter();

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
        <Box>
          <Typography variant="h4" fontWeight="600" gutterBottom>
            Children
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Manage your family's children profiles
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<Add />}
          onClick={() => router.push('/children/new')}
        >
          Add Child
        </Button>
      </Box>

      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Card>
            <CardContent sx={{ textAlign: 'center', py: 8 }}>
              <ChildCare sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
              <Typography variant="h6" color="text.secondary" gutterBottom>
                No children added yet
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                Add your first child to start tracking their activities
              </Typography>
              <Button
                variant="contained"
                startIcon={<Add />}
                onClick={() => router.push('/children/new')}
              >
                Add First Child
              </Button>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
        </Box>
      </AppShell>
    </ProtectedRoute>
  );
}