import React from 'react';
import { Plus } from 'lucide-react';
import { cn } from '@/utils';
import { Button } from "@/components/ui/button";

interface CreateItemControlProps {
    label: string;
    onClick: () => void;
    className?: string;
    icon?: React.ReactNode;
    disabled?: boolean;
}

export function CreateItemControl({ 
    label, 
    onClick, 
    className,
    icon = <Plus size={16} />,
    disabled = false,
}: CreateItemControlProps) {
    return (
        <Button 
            variant="outline"
            onClick={onClick}
            disabled={disabled}
            className={cn(
                "h-auto py-1 pr-3 pl-1 gap-2 border-border hover:border-input bg-card hover:bg-accent text-muted-foreground hover:text-foreground transition-all group disabled:cursor-not-allowed disabled:opacity-50",
                className
            )}
        >
            <div className="w-8 h-8 flex items-center justify-center text-muted-foreground group-hover:text-foreground transition-colors bg-muted rounded-md group-hover:bg-muted/80">
                {icon}
            </div>
            <span className="text-sm font-medium">
                {label}
            </span>
        </Button>
    );
}
