import { MainCard, SecondaryCard } from '../components/dashboard-cards';

export default async function ExpenseSummary() {
    return (
        <div className="my-4">

            <div className="flex flex-row w-full my-2">
                <MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />

                <div className="flex flex-col">
                    <MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
                    <MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
                </div>
                <div className="flex flex-col">
                    <MainCard amount="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
                    <MainCard amount="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
                </div>

            </div>

            <div className="flex flex-row w-full my-2">
                <MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />

                <div className="flex flex-col">
                    <SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
                    <SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
                </div>

                <div className="flex flex-col">
                <SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
                    <SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />

                </div>
            </div>

            <div className="flex flex-row w-full my-2">
                <MainCard style="blue" amount="5" title="Table simulations" iconName="ServerStackIcon" />
                <MainCard style="blue" amount="9" title="Bus simulations" iconName="TruckIcon" />
                <MainCard style="blue" amount="98" title="QR codes" iconName="QrCodeIcon" />
            </div>
        </div>
    );
}