import Link from "../link/Link";
import { ImageMask } from "./assets/ImageMask";
import {
  StyledCard,
  StyledCardBody,
  StyledCardFooter,
  StyledCardHeader,
} from "./Card.styled";
import { BodyProps, CardProps, FooterProps, HeaderProps } from "./types";
import LikeIcon from "./assets/like.svg";
import CommentIcon from "./assets/comment.svg";
import TimeIcon from "./assets/time.svg";
import React from "react";
import { Heading, Text } from "../../components/typography/Typography";

export const Card = (props: React.PropsWithChildren<CardProps>) => {
  const { children } = props;
  return <StyledCard>{children}</StyledCard>;
};

export const Header: React.FC<Partial<HeaderProps>> = props => {
  const { img } = props;
  return (
    <StyledCardHeader>
      <div className="img">
        <ImageMask img={img} />
      </div>
    </StyledCardHeader>
  );
};
export const Body: React.FC<Partial<BodyProps>> = props => {
  const { title, message } = props;
  return (
    <StyledCardBody>
      <Heading type="H4">{title}</Heading>
      <Text type="P">{message}</Text>
    </StyledCardBody>
  );
};
export const Footer: React.FC<Partial<FooterProps>> = props => {
  const { link, likesCount, commentCount, linkTitle, time } = props;
  return (
    <StyledCardFooter>
      {link && (
        <Link year="2022" href={link}>
          {linkTitle}
        </Link>
      )}
      <div className="icons">
        {likesCount && (
          <div className="icon">
            <LikeIcon />
            <Text type="SPAN">{likesCount}</Text>
          </div>
        )}
        {commentCount && (
          <div className="icon">
            <CommentIcon />
            <Text type="SPAN">{commentCount}</Text>
          </div>
        )}
        {time && (
          <div className="icon">
            <TimeIcon />
            <Text type="SPAN">{time}</Text>
          </div>
        )}
      </div>
    </StyledCardFooter>
  );
};

Card.Header = Header;
Card.Body = Body;
Card.Footer = Footer;