import React from 'react';
import noDataIcon from '../../../icons/icon.no-data.png';

interface NoDataIconProps {
    title?: string;
    action?: () => void;
    noButton?: boolean;
}

export default function NoDataIcon({ title, action, noButton }: NoDataIconProps) {
    return (
        <div className="flex flex-col items-center justify-center m-4">
            <img src={noDataIcon} alt="No data" />
            <p className="mt-2 text-gray-500">No {title} found</p>
            {!noButton && (
                <div className="mt-4">
                    <button
                        className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm"
                        onClick={action}
                    >
                        Click here to create your first {title}
                    </button>
                </div>
            )}
        </div>
    );
}