import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Chip from "@mui/material/Chip";
import { Button, Card, TextField } from "../ui";
import { useTheme } from "../../context/ThemeContext";

export default function UiKit() {
  const { theme, toggleTheme } = useTheme();
  return (
    <ScopedCssBaseline>
      <Box sx={{ p: 4, minHeight: "100vh", bgcolor: "background.default" }}>
        <Stack direction="row" alignItems="center" spacing={2} mb={3}>
          <Typography variant="h4">UI Kit</Typography>
          <Button color="inherit" variant="outlined" onClick={toggleTheme}>
            Theme: {theme}
          </Button>
        </Stack>

        <Stack spacing={3} sx={{ maxWidth: 520 }}>
          <Card>
            <Typography variant="h6" gutterBottom>
              Faktury
            </Typography>
            <Typography color="text.secondary" gutterBottom>
              12 vystavených tento měsíc
            </Typography>
            <Stack direction="row" spacing={1} mb={2}>
              <Chip label="Zaplaceno" color="success" size="small" />
              <Chip label="Po splatnosti" color="error" size="small" />
            </Stack>
            <TextField
              label="Hledat fakturu"
              placeholder="Číslo nebo klient…"
            />
            <Box mt={2}>
              <Button>Nová faktura</Button>
            </Box>
          </Card>
        </Stack>
      </Box>
    </ScopedCssBaseline>
  );
}