import React from 'react';
import { Link } from 'react-router-dom';

export default function Layout({ children }) {
    const iconUrl = window.InvizoConfig?.brandingIcon || '';
    return (
        <div className="flex min-h-[80vh] bg-background border rounded-2xl shadow-sm">
            <nav className="w-64 bg-secondary p-4 flex flex-col gap-2">
                <div className="mb-4">
                    <div className="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-2 py-1 align-middle">
                        {iconUrl ? (
                            <img
                                src={iconUrl}
                                alt=""
                                aria-hidden="true"
                                style={{
                                    width: '20px',
                                    height: '20px',
                                    fontSize: '20px',
                                    verticalAlign: 'middle',
                                }}
                            />
                        ) : null}
                        <span className="text-sm font-semibold text-slate-900 align-middle">Invizo Subscription</span>
                    </div>
                </div>
                <Link to="/" className="px-4 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-md font-medium text-sm">Dashboard</Link>
                <Link to="/subscriptions" className="px-4 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-md font-medium text-sm">Subscriptions</Link>
                <Link to="/settings" className="px-4 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-md font-medium text-sm">Settings</Link>
                <Link to="/setup" className="px-4 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-md font-medium text-sm">Setup Instructions</Link>
                <Link to="/support" className="px-4 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-md font-medium text-sm">Support</Link>
            </nav>
            <main className="flex-1 bg-background">
                {children}
            </main>
        </div>
    );
}
