// material-ui
import { useMediaQuery, Container, Link, Typography, Stack } from '@mui/material';
import bhkLogo from 'assets/images/BHK_logo_rgb_zh-hk.png';
// ==============================|| FOOTER - AUTHENTICATION ||============================== //

const AuthFooter = () => {
  const matchDownSM = useMediaQuery((theme) => theme.breakpoints.down('sm'));

  return (
    <Container maxWidth= "xl" sx={{minHeight: '5vh'}}>
      <Stack
        direction={matchDownSM ? 'column' : 'row'}
        justifyContent={matchDownSM ? 'center' : 'flex-start'}
        spacing={2}
        textAlign={matchDownSM ? 'center' : 'inherit'}
        alignItems="center"
      >
        <Typography variant="subtitle2" color="secondary" component="span">
          2024 &copy; 政府物流服務署
        </Typography>
        <Typography
            variant="subtitle2"
            color="secondary"
            component={Link}
            // href="https://material-ui.com/store/contributors/codedthemes/"
            target="_blank"
            underline="hover"
          >
            重要告示
          </Typography>
          <Typography
            variant="subtitle2"
            color="secondary"
            component={Link}
            // href="https://codedthemes.com"
            href="/testMailPage"
            target="_blank"
            underline="hover"
          >
            私隱政策
          </Typography>
      </Stack>  
        <Stack direction={matchDownSM ? 'column' : 'row'} spacing={matchDownSM ? 1 : 3} textAlign={matchDownSM ? 'center' : 'inherit'} justifyContent={matchDownSM?"center":"flex-end"}>
          
          <a href="https://www.w3.org/WAI/WCAG2AAA-Conformance"
            title="Explanation of WCAG 2 Level AAA conformance">
            <img height="32" width="88"
                src="https://www.w3.org/WAI/wcag2AAA"
                alt="Level AAA conformance,
                      W3C WAI Web Content Accessibility Guidelines 2.0"/>
          </a>
          <a href="https://www.brandhk.gov.hk/zh-hk"
            title="Brand Hong Kong">
            <img src={bhkLogo} alt="logo" height="32" width="88" 
            />
          </a>
        </Stack>
    </Container>
  );
};

export default AuthFooter;