import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { twMerge } from "tailwind-merge";
export const HomeScreenItem = function HomeScreenItem(props) {
    const { icon, title, description, containerClassName, shareable, onClick } = props;
    return (_jsxs("div", { className: twMerge("hover-bg-transparent relative flex h-24 w-40 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md p-2 text-center text-sm text-black", containerClassName, onClick && "cursor-pointer"), onClick: onClick, children: [_jsx("div", { className: "mx-auto pb-2", children: icon || (_jsx("div", { className: "size-8 items-center justify-center rounded-lg bg-black pt-1", children: _jsx("span", { className: "text-6 w-6 text-white", children: title.slice(0, 1).toUpperCase() }) })) }), _jsxs("div", { className: "w-full max-w-full", children: [_jsx("h3", { className: "w-full max-w-full truncate px-2", children: title }), description && _jsx("p", { className: "text-gray-500", children: description })] }), shareable && (_jsx("div", { className: "absolute left-2 top-0 mb-2", children: _jsx(Icon, { name: "PeopleFill", width: 12, height: 12 }) }))] }));
};
//# sourceMappingURL=home-screen-item.js.map