import * as React from 'react';
import { cn } from '@/lib/utils';
import { Button } from './button';
import { ArrowUpRight, type LucideIcon } from 'lucide-react';

export interface ActionCardProps {
    title: string;
    description?: string;
    icon: LucideIcon;
    iconColor?: 'blue' | 'purple' | 'green' | 'red' | 'yellow' | 'gray';
    href?: string;
    onClick?: () => void;
    disabled?: boolean;
    className?: string;
}

const iconColorClasses = {
    blue: 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-600',
    purple: 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-600',
    green: 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-600',
    red: 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-600',
    yellow: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-600',
    gray: 'bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-600',
};

const ActionCard = React.memo(function ActionCard({
    title,
    description,
    icon: Icon,
    iconColor = 'blue',
    href,
    onClick,
    disabled = false,
    className,
}: ActionCardProps) {
    const content = (
        <div className="flex items-center gap-3 w-full">
            <div className={cn('rounded-lg p-2', iconColorClasses[iconColor])}>
                <Icon className="h-5 w-5" />
            </div>
            <div className="text-left flex-1">
                <div className="font-medium">{title}</div>
                {description && (
                    <div className="text-sm text-muted-foreground">{description}</div>
                )}
            </div>
            <ArrowUpRight className="h-4 w-4 ml-auto" />
        </div>
    );

    return (
        <Button
            variant="outline"
            className={cn('w-full justify-start h-auto py-4', className)}
            disabled={disabled}
            onClick={onClick}
            asChild={!!href && !disabled}
        >
            {href && !disabled ? <a href={href}>{content}</a> : content}
        </Button>
    );
});

export interface ActionCardGridProps {
    children: React.ReactNode;
    columns?: 2 | 3 | 4;
    className?: string;
}

function ActionCardGrid({ children, columns = 3, className }: ActionCardGridProps) {
    const gridCols = {
        2: 'md:grid-cols-2',
        3: 'md:grid-cols-3',
        4: 'md:grid-cols-2 lg:grid-cols-4',
    };

    return (
        <div className={cn('grid gap-4', gridCols[columns], className)}>
            {children}
        </div>
    );
}

export { ActionCard, ActionCardGrid };