import { type LucideIcon } from 'lucide-react';
import Link from 'next/link';
import { cn } from '@/lib/utils';

interface PortalCardProps {
  title: string;
  value: number | string;
  description?: string;
  icon: LucideIcon;
  href?: string;
  className?: string;
}

export function PortalCard({
  title,
  value,
  description,
  icon: Icon,
  href,
  className,
}: PortalCardProps) {
  const content = (
    <div
      className={cn(
        'bg-white rounded-lg border p-6 flex items-start gap-4',
        href && 'hover:border-[#1e2844] hover:shadow-sm transition-all cursor-pointer',
        className,
      )}
    >
      <div className="p-2 rounded-lg bg-[#1e2844]/8">
        <Icon className="h-5 w-5 text-[#1e2844]" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm text-gray-500">{title}</p>
        <p className="text-2xl font-semibold text-gray-900 mt-0.5">{value}</p>
        {description && (
          <p className="text-xs text-gray-400 mt-1">{description}</p>
        )}
      </div>
    </div>
  );

  if (href) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return <Link href={href as any}>{content}</Link>;
  }

  return content;
}