import React from "react";
import { Box, Typography, Container } from "@mui/material";
import Leaderboard from "./components/Leaderboard/Leaderboard";

const LeaderboardPage = () => {
  return (
    <Container
      maxWidth={false}
      sx={{
        p: { xs: 1, sm: 2, md: 3 },
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        maxWidth: "100vw",
        overflow: "hidden"
      }}
    >
      <Box sx={{ mb: 3, width: "100%", textAlign: "center" }}>
        <Typography
          variant="h4"
          component="h1"
          sx={{
            fontWeight: 700,
            mb: 1,
            fontSize: { xs: "1.5rem", sm: "1.75rem", md: "2rem" },
          }}
        >
          Open Financial LLM Leaderboard - Multi-modal & Multi-lingual
        </Typography>
        <Typography
          variant="body1"
          color="text.secondary"
          sx={{ maxWidth: "800px", mx: "auto" }}
        >
          Comprehensive evaluation of language models on financial tasks across multiple languages and modalities
        </Typography>
      </Box>
      <Leaderboard />
    </Container>
  );
};

export default LeaderboardPage;