import React from "react";
import Image from "../../atoms/Image";
import Block from "../../atoms/Block";
import style from "../../../style";
export interface CardProps {
  classes?: {
    root?: string;
  };
  children?: React.ReactNode;
}

export interface CardHeaderProps {
  title: string;
  subTitle?: string;
  children?: React.ReactNode;
  classes?: {
    root?: string;
    title?: string;
    subTitle?: string;
  };
}

export interface CardImageProps {
  onClick?: () => void;
  src: string;
  classes?: {
    root?: string;
    image?: string;
  };
  children?: React.ReactNode;
}

export interface CardBodyProps {
  classes?: {
    root?: string;
  };
  children?: React.ReactNode;
}

export interface CardContentProps {
  classes?: {
    root?: string;
  };
  children?: React.ReactNode;
}

export interface CardFooterProps {
  classes?: {
    root?: string;
  };
  children?: React.ReactNode;
}

export const Card: React.FC<CardProps> = (props) => {
  const { classes, children } = props;

  return (
    <Block className={`${style.card.root} ${classes?.root} `}>{children}</Block>
  );
};

export const CardHeader: React.FC<CardHeaderProps> = (props) => {
  const { title, subTitle, classes, children } = props;

  return (
    <Block className={` ${style.card.header.root} ${classes?.root} `}>
      <Block className={` ${style.card.header.title} ${classes?.title} `}>
        {title}
      </Block>
      <Block className={` ${style.card.header.subTitle} ${classes?.subTitle} `}>
        {subTitle}
      </Block>
      {children}
    </Block>
  );
};

export const CardBody: React.FC<CardBodyProps> = (props) => {
  const { classes, children } = props;

  return (
    <Block className={`${style.card.body.root} ${classes?.root}`}>
      {children}
    </Block>
  );
};

export const CardContent: React.FC<CardContentProps> = (props) => {
  const { classes, children } = props;

  return (
    <Block className={`${style.card.content.root} ${classes?.root}`}>
      {children}
    </Block>
  );
};

export const CardImage: React.FC<CardImageProps> = (props) => {
  const { classes, children, src, onClick } = props;

  return (
    <Block
      onClick={onClick}
      className={`${style.card.image.root} ${classes?.root}`}
    >
      <Image
        className={`${style.card.image.img} ${classes?.image}`}
        src={src}
      />
      {children}
    </Block>
  );
};

export const CardFooter: React.FC<CardFooterProps> = (props) => {
  const { classes, children } = props;

  return (
    <Block className={`${style.card.footer.root} ${classes?.root}`}>
      {children}
    </Block>
  );
};
