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

interface CardProps {
  title: string;
  imgSrc: string;
  onClick(): void;
}

const StyledCard = styled.div(({ theme }) => {
  return css`
		border: 2px solid transparent;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

		&:hover {
			border-color: ${theme.colors.interaction.primaryInteractionColor};
			cursor pointer;
			
			img {
				opacity: 1
			}
		}
		
		img {
			width: 100%;
			height: auto;
			max-width: 400px;
			max-height: 300px;
			opacity: 0.9;
			margin: 0 0 ${theme.spacing.horizontalSpacing.horizWhiteSpacingsm}px;
			overflow: hidden;
		}

		.title {
			color: ${theme.colors.interaction.primaryInteractionColor};
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.25rem;
			line-height: 1.75rem;
			min-height: 4.375rem;
		}
	`;
});

export default function Card({ title, imgSrc, onClick }: CardProps) {
  return (
    <StyledCard
      tabIndex={0}
      className="-u-background-white -u-height-full -u-rounded-lg -u-padding-md -u-margin-b-md"
      onClick={onClick}
      onKeyDown={(e) => {
        if (["Enter", "Spacebar", " "].includes(e.key)) {
          onClick();
        }
      }}
    >
      <div className="-u-flex -u-items-center -u-flex-col">
        <img src={imgSrc} alt={title} className="-u-rounded-lg" />
        <div className="title">{title}</div>
      </div>
    </StyledCard>
  );
}