import { readableForeground } from '@/lib/branding-preview';

type ThemePreviewProps = {
    primary: string;
    accent: string;
    headingFamily: string;
    bodyFamily: string;
    logoUrl: string | null;
};

/**
 * Mini dashboard that reflects the unsaved colors and fonts. Styles are
 * inline so the preview never changes the colors used by the rest of the app.
 */
export default function ThemePreview({
    primary,
    accent,
    headingFamily,
    bodyFamily,
    logoUrl,
}: ThemePreviewProps) {
    const primaryForeground = readableForeground(primary);
    const accentForeground = readableForeground(accent);

    return (
        <div
            className="overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs"
            style={{ fontFamily: `'${bodyFamily}', sans-serif` }}
            aria-label="Theme preview"
        >
            <div className="flex h-12 items-center border-b px-4">
                {logoUrl ? (
                    <img
                        src={logoUrl}
                        alt=""
                        className="h-7 max-w-[120px] object-contain object-left"
                    />
                ) : (
                    <span
                        className="text-sm font-semibold"
                        style={{
                            fontFamily: `'${headingFamily}', sans-serif`,
                            color: primary,
                        }}
                    >
                        Your brand
                    </span>
                )}
            </div>

            <div className="flex min-h-48">
                <aside className="w-36 space-y-1 border-r bg-muted/40 p-3 text-sm">
                    <div
                        className="rounded-md px-2 py-1.5 font-medium"
                        style={{
                            backgroundColor: primary,
                            color: primaryForeground,
                        }}
                    >
                        Dashboard
                    </div>
                    <div className="rounded-md px-2 py-1.5 text-muted-foreground">
                        Growth score
                    </div>
                    <div className="rounded-md px-2 py-1.5 text-muted-foreground">
                        Settings
                    </div>
                </aside>

                <div className="flex-1 space-y-3 p-4">
                    <h3
                        className="text-base font-semibold"
                        style={{ fontFamily: `'${headingFamily}', sans-serif` }}
                    >
                        Growth overview
                    </h3>
                    <p className="text-sm text-muted-foreground">
                        Revenue is up this quarter. Review your next steps.
                    </p>

                    <div
                        className="rounded-md border-l-4 px-3 py-2 text-sm"
                        style={{
                            borderColor: primary,
                            backgroundColor: accent,
                            color: accentForeground,
                        }}
                    >
                        Tip: connect your accounts to unlock insights.
                    </div>

                    <button
                        type="button"
                        className="rounded-md px-3 py-1.5 text-sm font-medium"
                        style={{
                            backgroundColor: primary,
                            color: primaryForeground,
                        }}
                    >
                        Primary action
                    </button>
                </div>
            </div>
        </div>
    );
}