import classNames from "classnames";
import React from "react";

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Typography from "./typography/Typography";
import Heading from "./typography/Heading";
import Link from "./typography/Link";
/* -------------------------------------------------------------------------- */
/*                                    Props                                   */
/* -------------------------------------------------------------------------- */
type Props = {
  /**
   * Card component accept children
   */
  children: React.ReactNode;
  /**
   * Styling the card component
   */
  className?: string | undefined;
};

const Card = ({ children, className }: Props) => {
  return (
    <div
      className={classNames([
        className,
        "inline-flex flex-col justify-between p-4 items-start rounded border border-gray-75  gap-y-8 overflow-hidden",
      ])}
    >
      {children}
    </div>
  );
};

// Avatar function
type AvatarProps = {
  children?: React.ReactNode;
};
Card.Avatar = function CardAvatar({ children }: AvatarProps) {
  return <div>{children}</div>;
};

// Title function
Card.Title = function CardTitle({ children, className }: Props) {
  return (
    <Heading className={classNames([className, "select-none  "])}>
      {children}
    </Heading>
  );
};

// SubTitle function
Card.SubTitle = function CardSubTitle({ children, className }: Props) {
  return (
    <Typography className={classNames([className, ""])}>{children}</Typography>
  );
};

// Body function
Card.Body = function CardTitle({ children, className }: Props) {
  return (
    <Typography //
      fontWeightVariant="normal"
      className={classNames([className, "text-sm h-14 overflow-hidden "])}
    >
      {children}
    </Typography>
  );
};

// Cardheader function
Card.CardHeader = function CardCardHeader({ children, className }: Props) {
  return (
    <div className={classNames([className, "flex items-start gap-4"])}>
      {children}
    </div>
  );
};

// Cardcontent function
Card.CardContent = function CardCardContent({ children, className }: Props) {
  return (
    <div className={classNames([className, "flex flex-col gap-y-4 "])}>
      {children}
    </div>
  );
};

// Cardaction function
type CardActionProps = {
  children: React.ReactNode;
  className?: string | undefined;
  href?: string;
};
Card.CardAction = function CardCardAction({
  children,
  className,
  href = "#",
}: CardActionProps) {
  return (
    <Link
      to={href}
      className={classNames([className, "flex items-center gap-2"])}
    >
      {children}
    </Link>
  );
};

// CardMedia function
type CardMediaProps = {
  children?: React.ReactNode;
  className?: string | undefined;
  src?: string;
};
Card.CardMedia = function CardCardMedia({
  className,
  src = "#",
}: CardMediaProps) {
  return (
    <img src={src} className={classNames([className, "w-full h-32 rounded"])} />
  );
};

export default Card;