import { type ReactNode } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

export default function FieldsetWrapper({
  title,
  icon,
  description,
  className,
  inline,
  children,
}: Readonly<{
  title: string;
  icon: ReactNode;
  description: string;
  className?: string;
  inline?: boolean;
  children: ReactNode;
}>) {
  return (
    <Card
      className={cn("col-span-2", {
        "sm:col-span-1 grid grid-cols-1 lg:grid-cols-2 items-center": inline,
      })}
    >
      <CardHeader>
        <CardTitle className="flex flex-row w-full items-start">
          {icon && icon}
          {title}
        </CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent
        className={cn(
          inline
            ? "flex justify-start lg:justify-end items-center lg:pt-5"
            : "grid grid-cols-1",
          className,
        )}
      >
        {children}
      </CardContent>
    </Card>
  );
}