import React from 'react';
import styled from 'styled-components';

import type { ResolvedNavItem } from '@redocly/config';

import { Link } from '@redocly/theme/components/Link/Link';
import { H3 } from '@redocly/theme/components/Typography/H3';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export interface CardProps {
  title?: string;
  icon?: string;
  links: ResolvedNavItem;
  className?: string;
}

export function Card(props: CardProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  return (
    <CardWrapper data-component-name="Cards/Card" className={props.className}>
      {props.icon && <img src={props?.icon} alt={props?.title} />}
      {props.title && <H3>{props.title}</H3>}
      {props.links.items && (
        <CardLinksList>
          {props.links.items.map((item) => (
            <li key={item.label}>
              <Link to={item.link as string}>
                {translate(item.labelTranslationKey, item.label)}
              </Link>
            </li>
          ))}
        </CardLinksList>
      )}
    </CardWrapper>
  );
}

const CardWrapper = styled.div`
  border-radius: 10px;
  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
  padding: 20px;
  margin: 0 20px 20px 0;
  min-width: 25%;
  font-family: var(--font-family-base);
`;

const CardLinksList = styled.ul`
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    margin-bottom: 10px;
  }
`;