import React, { ReactNode, JSX } from 'react';
import styled from 'styled-components';

export type CatalogEntityPropertyCardProps = {
  header: ReactNode;
  content: ReactNode;
  onClick?: () => void;
  hoverEffect?: boolean;
};

export function CatalogEntityPropertyCard({
  header,
  content,
  onClick,
  hoverEffect = true,
}: CatalogEntityPropertyCardProps): JSX.Element {
  return (
    <CatalogEntityPropertyWrapper
      data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard"
      onClick={onClick}
      hoverEffect={hoverEffect}
    >
      <CardHeader>{header}</CardHeader>
      <CardContent>{content}</CardContent>
    </CatalogEntityPropertyWrapper>
  );
}

const CatalogEntityPropertyWrapper = styled.div<{ hoverEffect: boolean }>`
  display: flex;
  flex-direction: column;
  color: var(--catalog-card-text-color);
  background-color: var(--catalog-card-bg-color);
  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
    var(--catalog-card-border-color);
  border-radius: var(--catalog-card-border-radius, 8px);
  transition: all 0.2s ease-in-out;
  height: 100%;
  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
  gap: var(--catalog-card-content-gap-vertical);

  ${({ hoverEffect }) =>
    hoverEffect &&
    `
    &:hover {
      border-color: var(--catalog-card-border-color-hover);
    }
  `}

  ${(props) =>
    props.onClick &&
    `
    cursor: pointer;
  `}
`;

const CardHeader = styled.div`
  display: flex;
  align-items: center;
  gap: var(--catalog-card-content-gap);
  font-weight: var(--font-weight-medium);
`;

const CardContent = styled.div`
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--catalog-card-content-gap);
  flex-wrap: wrap;
  color: var(--text-color-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
`;