1
 2import { Label, Separator } from '@marzneshin/components';
 3import { ServiceType } from '@marzneshin/features/services';
 4import { LucideIcon, ServerIcon, UserIcon } from 'lucide-react';
 5import { FC } from 'react'
 6
 7interface ServiceCardProps {
 8    service: ServiceType
 9}
10
11const ServiceProperty = ({ Icon, amount }: { Icon: LucideIcon, amount: number }) => (
12    <div className="flex flex-row items-center w-full">
13        <Icon className="w-4 h-4 font-light" />
14        {amount}
15    </div>
16)
17
18export const ServiceCard: FC<ServiceCardProps> = (
19    { service }
20) => {
21    if (service.users && service.inbounds) {
22        return (
23            <div className="w-full border rounded-md p-2 flex justify-between flex-row items-center">
24                <Label>{service.name}</Label>
25                <div className="flex flex-row items-center gap-1">
26                    <ServiceProperty Icon={UserIcon} amount={service.users.length} />
27                    <Separator className="w-4 rotate-[-75deg]" />
28                    <ServiceProperty Icon={ServerIcon} amount={service.inbounds.length} />
29                </div>
30            </div>
31        )
32    }
33};