import { cn } from '@/lib/utils';
import { Icon } from '@phosphor-icons/react';
import { ReactNode } from 'react';

export default function ReportCard({
  icon,
  bgIcon: BgIcon,
  value,
  label,
  variant = 'normal',
}: {
  icon?: ReactNode;
  bgIcon?: Icon;
  value: string;
  label: string;
  variant?:
    | 'normal'
    | 'success'
    | 'pending'
    | 'destructive'
    | 'important'
    | 'minimal'
    | 'plain';
}) {
  return variant !== 'minimal' ? (
    <div
      className={cn(
        'relative flex flex-col items-start justify-center rounded-xl border p-4',
        variant === 'normal' && 'border-black/5 bg-white',
        variant === 'success' && 'border-primary/20 bg-primary-light/5',
        variant === 'pending' && 'border-warning-light/20 bg-warning-light/5',
        variant === 'destructive' && 'border-destructive/20 bg-destructive/5',
        variant === 'plain' && 'border-transparent px-0',
        variant === 'important' &&
          'border-transparent bg-foreground p-4 text-white md:p-8',
      )}
    >
      {icon && icon}
      <h3 className="mb-2 text-lg font-medium md:text-xl">{value}</h3>
      <p
        className={cn(
          'text-sm text-black/50 md:text-base',
          variant === 'important' && 'text-white',
        )}
      >
        {label}
      </p>

      {BgIcon && (
        <div className="absolute -right-3 -bottom-3 rounded-full bg-white/20 p-2 md:p-5">
          <BgIcon weight="fill" className="size-14 text-foreground" />
        </div>
      )}
    </div>
  ) : (
    <div className="flex items-center justify-between rounded-2xl border border-black/5 bg-white px-4 py-3 md:px-8 md:py-6">
      <p className="text-sm md:text-base">{label}</p>
      <h3 className="text-xl font-medium md:text-2xl">{value}</h3>
    </div>
  );
}