import type { Route } from './+types/home'
import { Box, Typography, Container } from '@mui/material'
import { TaskList } from '~/components/TaskList'

export function meta(_: Route.MetaArgs) {
  return [
    { title: "Captain's Log - Tasks" },
    { name: 'description', content: 'GTD-inspired task management system' },
  ]
}

export default function Home() {
  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 4 }}>
        <Typography variant="h1" component="h1" gutterBottom>
          Tasks
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
          Your GTD-inspired task management system. Capture everything, see only
          what matters.
        </Typography>

        <TaskList />
      </Box>
    </Container>
  )
}