'use client';

import * as React from 'react';
import { Card, CardContent } from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { cn } from '../../shared/utils';

export interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description?: string;
  icon: React.ReactNode;
  badge?: string;
  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
  actionLabel: string;
  actionVariant?: React.ComponentProps<typeof Button>['variant'];
  onAction?: () => void;
  disabled?: boolean;
}

export function QuickActionCard({
  title,
  description,
  icon,
  badge,
  badgeVariant = 'secondary',
  actionLabel,
  actionVariant = 'default',
  onAction,
  disabled,
  className,
  ...props
}: QuickActionCardProps) {
  return (
    <Card
      className={cn(
        'w-full group transition-shadow hover:shadow-md',
        disabled && 'opacity-60 pointer-events-none',
        className
      )}
      {...props}
    >
      <CardContent className="pt-6 flex flex-col items-start gap-4">
        <div className="flex items-start justify-between w-full">
          <div className="p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary">{icon}</div>
          {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
        </div>

        <div className="space-y-1 flex-1">
          <p className="font-semibold text-sm leading-tight">{title}</p>
          {description && (
            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
          )}
        </div>

        <Button
          variant={actionVariant}
          size="sm"
          className="w-full"
          onClick={onAction}
          disabled={disabled}
        >
          {actionLabel}
        </Button>
      </CardContent>
    </Card>
  );
}