import { Box, Typography } from '@mui/material';
import Img from '../../Img';

export type RequestAppInfo = {
  appLogo: string;
  appName: string;
  appUrl: string;
};

export type CurrentAppInfo = {
  appLogo: string;
  appName: string;
  appUrl: string;
};

export default function AuthAppsInfo({
  requestAppInfo,
  currentAppInfo,
}: {
  requestAppInfo: RequestAppInfo;
  currentAppInfo: CurrentAppInfo;
}) {
  return (
    <Box
      sx={{
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 2,
      }}>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        {/* FIXME: @zhanghan 增加 hover 的效果 */}
        <Img src={currentAppInfo.appLogo} alt="Server" width={48} height={48} useProxyFallback />

        <Box
          sx={{
            mx: 2,
            display: 'flex',
            alignItems: 'center',
            '& .dot': {
              width: 8,
              height: 8,
              borderRadius: '50%',
              bgcolor: 'grey.500',
              mx: 0.5,
            },
          }}>
          <Box className="dot" />
          <Box className="dot" />
          <Box className="dot" />
        </Box>

        {/* FIXME: @zhanghan 增加 hover 的效果 */}
        <Img src={requestAppInfo.appLogo} alt={requestAppInfo.appName} width={48} height={48} useProxyFallback />
      </Box>

      <Typography
        sx={{
          mb: 1,
          fontSize: '1.2rem',
        }}>
        Authorize{' '}
        <Box component="span" sx={{ color: 'primary.main' }}>
          {requestAppInfo.appName}
        </Box>
      </Typography>
    </Box>
  );
}
