import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

export const CardContent = ({ children }: { children: ReactNode }) => {
  return <div className="p-4 md:p-8">{children}</div>;
};

export const CardDescription = ({ children }: { children: ReactNode }) => {
  return (
    <p className="mt-2 max-w-md text-center text-balance text-neutral-600 dark:text-neutral-400">
      {children}
    </p>
  );
};

export const CardSkeleton = ({
  className,
  children,
}: {
  className?: string;
  children?: ReactNode;
}) => {
  return (
    <div
      className={cn(
        "relative flex h-80 flex-col overflow-hidden perspective-distant sm:h-60 md:h-80",
        className,
      )}
    >
      {children}
    </div>
  );
};