import React from 'react';
import { router, usePage } from '@inertiajs/react';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';
import EmailStatistics from './partials/EmailStatistics';
import SentEmails from './partials/SentEmails';

interface LandingProps {
    type: string;
}

const subMenu = [
    {
        title: 'Email Statistics',
        url: '/logs/email-statistics',
        icon: 'fas fa-chart-bar',
    },
    {
        title: 'Sent Emails',
        url: '/logs/sent-emails',
        icon: 'fas fa-envelope',
    },
];

export default function Landing({ type }: LandingProps) {
    const { url } = usePage();

    const navigate = (targetUrl: string) => {
        router.get(targetUrl);
    };

    const renderActiveComponent = () => {
        if (type === 'email-statistics') return <EmailStatistics />;
        if (type === 'sent-emails') return <SentEmails />;
        return null;
    };

    return (
        <MainLayout>
            <AppPageHeader title="Logs" subtitle={""} />
            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12 md:col-span-3">
                    <div className="bg-white rounded-lg shadow">
                        <ul className="divide-y divide-gray-200">
                            {subMenu.map((item, index) => (
                                <li
                                    key={index}
                                    className={`px-4 py-3 cursor-pointer hover:bg-cyan-50 transition-colors ${
                                        url === item.url ? 'text-cyan-600 font-medium' : 'text-gray-700'
                                    }`}
                                    onClick={() => navigate(item.url)}
                                >
                                    <i className={`${item.icon} mr-2`}></i>
                                    {item.title}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
                <div className="col-span-12 md:col-span-9">
                    {renderActiveComponent()}
                </div>
            </div>
        </MainLayout>
    );
}