import { useTranslation } from 'react-i18next';

import { Stack, Typography } from '@mui/material';
import SelectionCard from '@src/components/composed-components/SelectionCard';

import { type InstanceCardProps } from '../types';

const InstanceCard = ({ name, logo }: InstanceCardProps) => {
  const { t } = useTranslation('material_hu_only');

  return (
    <Stack
      sx={{
        gap: 1,
      }}
    >
      <SelectionCard
        checked={false}
        sx={{
          minWidth: '160px',
          minHeight: '80px',
          width: 'fit-content',
          border: 'none',
          alignContent: 'center',
          justifyContent: 'center',
          display: 'flex',
          '&': {
            cursor: 'default',
            alignItems: 'center',
          },
          '&:hover': {
            boxShadow: 'none',
          },
        }}
      >
        <img
          alt={t('login.community_logo_alt')}
          src={logo}
          style={{
            maxHeight: '65px',
            maxWidth: '128px',
            objectFit: 'contain',
          }}
        />
      </SelectionCard>
      <Typography
        variant="globalXS"
        sx={{
          color: theme => theme.palette.new.text.neutral.lighter,
        }}
      >
        {name}
      </Typography>
    </Stack>
  );
};

export default InstanceCard;
