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

import Box from '~/src/components/Box';
import Card from '~/src/components/Card';
import Clickable from '~/src/components/Clickable';
import FadeOnMount from '~/src/components/FadeOnMount';
import HoverBackground from '~/src/components/HoverBackground';
import Text from '~/src/components/Text';

export const ToolMenuItem = ({
  tool,
  id,
}: {
  tool: AdminToolDefinition;
  id: string;
}) => {
  const {
    title,
    description,
    path,
    Icon,
    iconProps = { size: '2.35em' },
  } = tool;

  return (
    <Card
      flexColumn
      testId={`admin-tool-${id}`}
      style={{
        fontSize: '1.9rem',
      }}
      width={250}
      height={250}
    >
      <FadeOnMount delay={180}>
        <HoverBackground color="rgba(255,255,255,0.025)">
          <Clickable positionRelative href={path} width="100%" height="100%">
            <Box centerContent flexColumn coverParent padding="1.5rem">
              <Icon {...iconProps} noFlexShrink />
              <Box margin=".3em 0 0">
                <Text bold size="1.0em" centered>
                  {title}
                </Text>
              </Box>
              <Box margin=".5em 0 0">
                <Text
                  color="#999"
                  centered
                  size="0.7em"
                  isParagraph
                  lineHeight={'1.3em'}
                  minHeight="2.6em"
                  lineClamp={3}
                >
                  {description}
                </Text>
              </Box>
            </Box>
          </Clickable>
        </HoverBackground>
      </FadeOnMount>
    </Card>
  );
};