import { CompoundButton, Text } from "@fluentui/react-components";
import { BuildingColor, CloudColor, DocumentColor, FormColor, MapFilled, PeopleListColor, ShieldColor } from "@fluentui/react-icons";
//import { IconBuildingFactory2, IconFiles, IconMap, IconReport, IconServer, IconShield, IconUsers } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";

export default function Main() {
    const navigate = useNavigate()

    interface CustomCardProps {
        link: string;
        icon: any;
        label: string;
        secondaryLabel?: string;
    }
    const CustomCard = ({
        link,
        icon,
        label,
        secondaryLabel
    }: CustomCardProps) => {
        return (
            <CompoundButton
                onClick={() => navigate(link)}
                style={{ cursor: 'pointer', userSelect: 'none' }}
                icon={icon}
                secondaryContent={secondaryLabel}
            >

                <Text weight={'bold'} size={400}>
                    {label}
                </Text>
            </CompoundButton>
        )
    }

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: '1rem',
            padding: '1rem'
        }}>
            <Text size={600} weight='bold'>
                Главная
            </Text>

            <div style={{
                display: 'flex',
                gap: '1rem',
                flexWrap: 'wrap'
            }}>
                <CustomCard link="/user" icon={<PeopleListColor color="#6495ED" />} label="Пользователи" secondaryLabel="Управление пользователями"/>
                <CustomCard link="/role" icon={<ShieldColor color="#6495ED" />} label="Роли" />
                <CustomCard link="/documents" icon={<DocumentColor color="#6495ED" />} label="Документы" secondaryLabel="Обзор файлов/документов"/>
                <CustomCard link="/reports" icon={<FormColor color="#6495ED" />} label="Отчеты" secondaryLabel="Просмотр и создание отчетных документов"/>
                <CustomCard link="/servers" icon={<CloudColor color="#6495ED" />} label="Серверы" secondaryLabel="Мониторинг серверов"/>
                <CustomCard link="/boilers" icon={<BuildingColor color="#6495ED" />} label="Котельные" />
                <CustomCard link="/map-test" icon={<MapFilled color="#6495ED" />} label="ИКС" secondaryLabel="Инженерно-картографическая система"/>
            </div>
        </div>
    )
}