import { cn } from "~/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "./card";

interface BaseCardProps {
  title?: string;
  className?: string;
  headerClassName?: string;
  contentClassName?: string;
  children: React.ReactNode;
  withHeader?: boolean;
}

export function BaseCard({
  title,
  className,
  headerClassName,
  contentClassName,
  children,
  withHeader = false,
}: BaseCardProps) {
  return (
    <Card
      className={cn(
        "bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-4 grid items-center",
        className
      )}
    >
      {withHeader && title ? (
        <CardHeader className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)}>
          <CardTitle className="text-white text-sm text-right font-persian px-4">{title}</CardTitle>
        </CardHeader>
      ) : title ? (
        <div className="border-b-2 border-gray-500/20 pb-2">
          <h3 className="text-sm font-bold text-white text-right font-persian px-4">{title}</h3>
        </div>
      ) : null}
      <CardContent className={cn("py-2 px-4", contentClassName)}>
        {children}
      </CardContent>
    </Card>
  );
}