import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import { ArrowLineUpRightIcon, Icon } from '@phosphor-icons/react';
import { ReactNode } from 'react';

export default function DashboardCard({
  icon: Icon,
  iconColor = 'normal',
  title,
  className,
  children,
  link,
}: {
  icon: Icon;
  iconColor?: 'normal' | 'success' | 'destructive';
  title: string;
  className?: string;
  children: ReactNode;
  link?: string;
}) {
  return (
    <Card className={cn('', className)}>
      <CardHeader className="h-10 items-center justify-between">
        <div className="flex items-center gap-2">
          <Icon
            weight="fill"
            className={cn(
              'size-6',
              iconColor === 'normal' && 'text-black/50',
              iconColor === 'success' && 'text-primary-light',
              iconColor === 'destructive' && 'text-destructive',
            )}
          />
          <CardTitle>{title}</CardTitle>
        </div>

        {link && (
          <Button
            variant="outline"
            onClick={() => router.visit(link)}
            size="icon"
          >
            <ArrowLineUpRightIcon
              weight="bold"
              className="size-5 text-black/50"
            />
          </Button>
        )}
      </CardHeader>
      <Separator />

      <CardContent>{children}</CardContent>
    </Card>
  );
}