"use client";

import { Slot } from "@radix-ui/react-slot";
import React from "react";
import { cx } from "../lib/utils";

interface OnboardingCardProps extends React.ComponentPropsWithoutRef<"div"> {
	asChild?: boolean;
}

const OnboardingCard = React.forwardRef<HTMLDivElement, OnboardingCardProps>(
	({ className, asChild, ...props }, forwardedRef) => {
		const Component = asChild ? Slot : "div";
		return (
			<Component
				ref={forwardedRef}
				className={cx(
					"relative w-full rounded-lg border p-6 text-left shadow-sm",
					"bg-card",
					"border-border",
					className,
				)}
				{...props}
			/>
		);
	},
);

OnboardingCard.displayName = "OnboardingCard";

export { OnboardingCard, type OnboardingCardProps };