import { cn } from "@zexon/ui/lib/utils";
import type * as React from "react";

export interface InfoCardProps extends React.ComponentProps<"div"> {
	icon?: React.ReactNode;
	title: string;
	description: string;
}

export function InfoCard({
	icon,
	title,
	description,
	className,
	...props
}: InfoCardProps) {
	return (
		<div
			data-slot="info-card"
			className={cn(
				"group flex flex-col gap-3 rounded border border-border bg-card p-5 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm",
				className,
			)}
			{...props}
		>
			{icon && (
				<div className="flex size-10 items-center justify-center rounded border border-border text-muted-foreground transition-colors group-hover:text-primary">
					{icon}
				</div>
			)}
			<h3 className="text-sm font-semibold text-foreground">{title}</h3>
			<p className="text-sm leading-relaxed text-muted-foreground">
				{description}
			</p>
		</div>
	);
}