GitFOSS

import React, { VFC } from "react";
import styled, { css } from "styled-components";

import type { AppThemeScheme, WithThemeSchemeProp } from "../types";
import { Card } from "./Card.styled";
import { ChevronRightIcon } from "./icons";
import { NamedColors } from "../utils/style";

interface DocSectionEntryCardProps {
  coverImageUrl: string;
  href: string;
  summary: string;
  themeScheme: AppThemeScheme;
  title: string;
}

export const DocSectionEntryCard: VFC<DocSectionEntryCardProps> = ({
  coverImageUrl,
  href,
  summary,
  themeScheme,
  title,
}) => {
  return (
    <StyledDocSectionEntryCard themeScheme={themeScheme}>
      <StyledDocSectionEntryLink href={href} title={title}>
        <StyledCoverImage src={coverImageUrl} themeScheme={themeScheme} />
        <StyledTitleRow themeScheme={themeScheme}>
          <h2>{title}</h2>
          <ChevronRightIcon />
        </StyledTitleRow>
        <StyledSummaryText themeScheme={themeScheme}>
          {summary}
        </StyledSummaryText>
      </StyledDocSectionEntryLink>
    </StyledDocSectionEntryCard>
  );
};

const StyledDocSectionEntryCard = styled(Card)`
  flex: 1;
  min-width: 350px;
  max-width: 100%;
  min-height: 395px;

  transition: transform 180ms ease-in-out 0s;

  &:hover {
    transform: translateY(-6px);

    & h2 {
      text-decoration: underline;
    }
  }
`;

const StyledDocSectionEntryLink = styled.a`
  height: 100%;
  width: 100%;

  text-decoration: unset;
  color: unset;
`;

const StyledCoverImage = styled.div<WithThemeSchemeProp & { src: string }>`
  width: 100%;
  min-height: 175px;
  height: 175px;
  max-height: 175px;

  ${({ src, themeScheme }) => css`
    background-color: ${NamedColors.CARD_OVERLAY[themeScheme]};
    background-image: url("${src}");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  `};

  appearance: none;
  border-image: none;
  border: none;
  border-color: transparent;
  border-radius: 8px;
  outline: none;
  overflow: hidden;
`;

const StyledTitleRow = styled.div<WithThemeSchemeProp>`
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  margin-top: 20px;

  & > h2 {
    flex: 1;
    margin: 0;
  }

  & > div[aria-roledescription="icon"] {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    min-width: 32px;
    width: 32px;
    max-width: 32px;
    min-height: 32px;
    height: 32px;
    max-height: 32px;

    ${({ themeScheme }) => css`
      background-color: ${NamedColors.CARD_OVERLAY[themeScheme]};
      color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
    `};

    border-radius: ${32 / 2}px;
  }
`;

const StyledSummaryText = styled.p<WithThemeSchemeProp>`
  line-height: 24px;

  ${({ themeScheme }) => css`
    color: ${NamedColors.TEXT_MUTED[themeScheme]};
  `};
`;