import Skeleton from "react-loading-skeleton";
import AspectRatio from "./AspectRatio";
import classNames from "classnames";

/* -------------------------------------------------------------------------- */
/*                                    Props                                   */
/* -------------------------------------------------------------------------- */
type Props = {
  /**
   * Card component accept children
   */
  children?: React.ReactNode;
  /**
   * Styling the card component
   */
  className?: string | undefined;
};

const SkeletonCard = ({ className, children }: Props) => {
  return (
    <div
      className={classNames(
        " justify-between p-4 items-start rounded border border-[#F000F0]  overflow-hidden",
        className
      )}
    >
      {children}
    </div>
  );
};

// Media
SkeletonCard.Media = function SkeletonCardCardMedia() {
  return (
    <AspectRatio>
      <AspectRatio.Content>
        <Skeleton count={1} className="h-full" />
      </AspectRatio.Content>
    </AspectRatio>
  );
};

// Content
SkeletonCard.Content = function SkeletonCardCardContent({
  children,
  className,
}: Props) {
  return (
    <div className={classNames([className, "flex flex-col gap-y-4 mb-3"])}>
      {children}
    </div>
  );
};

// Header
SkeletonCard.Header = function SkeletonCardCardHeader({
  children,
  className,
}: Props) {
  return (
    <div className={classNames([className, "flex items-start gap-4 w-full"])}>
      {children}
    </div>
  );
};

// Avatar
SkeletonCard.Avatar = function SkeletonCardCardAvatar() {
  return <Skeleton circle width={48} height={48} />;
};

// Title
SkeletonCard.Title = function SkeletonCardCardTitle() {
  return <Skeleton count={1} width={150} height={28} />;
};

// Body
SkeletonCard.Body = function SkeletonCardCardBody({
  children,
  className,
}: Props) {
  return <Skeleton count={3} className={classNames("text-sm", className)} />;
};

// Action
SkeletonCard.Action = function SkeletonCardCardAction({ className }: Props) {
  return (
    <div className={classNames("w-1/2", className)}>
      <Skeleton count={1} />
    </div>
  );
};

export default SkeletonCard;