import { Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';
import {
    Card,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { docsUrl } from '@/docs/urls';

type Props = {
    title: string;
    description: string;
    slug?: string;
};

export function DocsCard({ title, description, slug }: Props) {
    const content = (
        <Card className="group h-full transition-colors hover:border-primary/40 hover:bg-muted/30">
            <CardHeader className="gap-2">
                <CardTitle className="flex items-center justify-between text-base">
                    {title}
                    {slug ? (
                        <ArrowRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary" />
                    ) : null}
                </CardTitle>
                <CardDescription className="text-sm leading-relaxed">
                    {description}
                </CardDescription>
            </CardHeader>
        </Card>
    );

    if (slug) {
        return (
            <Link href={docsUrl(slug)} className="block h-full">
                {content}
            </Link>
        );
    }

    return content;
}