import { cn } from "@repo/shadcn-ui/lib/utils";
import * as React from "react";

export const Fieldset = ({ className, children, ...props }: React.ComponentProps<"fieldset">) => (
  <fieldset
    data-slot='fieldset'
    className={cn(
      "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6 bg-gray-50/50 rounded-xl p-6",
      className
    )}
    {...props}
  >
    {children}
  </fieldset>
);

export const FieldGroup = ({ className, children, ...props }: React.ComponentProps<"div">) => (
  <div data-slot='control' className={cn("space-y-6", className)} {...props}>
    {children}
  </div>
);

export const Field = ({ className, children, ...props }: React.ComponentProps<"div">) => (
  <div
    className={cn(
      "[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium",
      className
    )}
    {...props}
  >
    {children}
  </div>
);

export const Legend = ({ className, children, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot='legend'
    className={cn("text-base/6 font-semibold data-disabled:opacity-50 sm:text-sm/6", className)}
    {...props}
  >
    {children}
  </div>
);

export const Description = ({ className, children, ...props }: React.ComponentProps<"p">) => (
  <p data-slot='text' className={cn("text-base/6 sm:text-sm/6", className)} {...props}>
    {children}
  </p>
);
