import { cn } from "@/lib/utils";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";

type FormWrapperProps = {
  children: React.ReactNode;
};
export function FormCard({ children }: FormWrapperProps) {
  return (
    <div className="bg-gray-100 rounded shadow w-fit flex">{children}</div>
  );
}

type FormContentProps = {
  children: React.ReactNode;
  title?: string;
  icon?: IconDefinition;
  subtitle?: string;
};
export function FormContent({
  children,
  title,
  icon,
  subtitle,
}: FormContentProps) {
  return (
    <div className="p-4 w-[300px]">
      <div className="space-y-4">
        <div className="flex text-gray-500">
          {icon && (
            <div className={cn(subtitle ? "text-4xl mr-2" : "text-xl mr-1")}>
              <FontAwesomeIcon icon={icon} />
            </div>
          )}
          <div className="-space-y-1">
            <h1 className="font-bold text-black text-xl">{title}</h1>
            {subtitle && <p className="text-xs">{subtitle}</p>}
          </div>
        </div>
        <div className="p-4 bg-white rounded-lg shadow">{children}</div>
      </div>
    </div>
  );
}

type FormInfoProps = {
  children: React.ReactNode;
  className?: string;
  args?: any;
} & React.ComponentPropsWithoutRef<"div">;
export function FormInfo({ children, className, ...args }: FormInfoProps) {
  return (
    <div
      className={cn(
        "bg-blue-600 p-4 text-white w-[300px] rounded-r",
        className
      )}
      {...args}
    >
      {children}
    </div>
  );
}