import { TooltipContent } from '@/Components/ui/tooltip';
import { Device } from '@/types';
import {
    Tooltip,
    TooltipProvider,
    TooltipTrigger,
} from '@radix-ui/react-tooltip';
import { BadgeCheck, CircleAlert } from 'lucide-react';
import React from 'react';

export default function DeviceStatusIcon({ device }: { device: Device }) {
    const Icon = ({
        children,
        message,
    }: {
        children: React.ReactNode;
        message: string;
    }) => {
        return (
            <TooltipProvider delayDuration={200}>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <div>{children}</div>
                    </TooltipTrigger>
                    <TooltipContent className="text-gray-500">
                        <p>{message}</p>
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>
        );
    };
    if (device.account_connected) {
        return (
            <Icon message={`Account ${device.manufacturer} connesso`}>
                <BadgeCheck className="stroke-neutral-500" />
            </Icon>
        );
    }
    return (
        <Icon message={`Account ${device.manufacturer} non connesso`}>
            <CircleAlert className="stroke-red-500" />
        </Icon>
    );
}