export type BrandFont = {
    key: string;
    family: string;
};

/** Shared `theme` prop resolved on the server for the current request. */
export type BrandTheme = {
    isCustom: boolean;
    fonts: {
        heading: BrandFont;
        body: BrandFont;
    };
    fontsHref: string | null;
    logoUrl: string | null;
    logoDarkUrl: string | null;
    iconUrl: string | null;
    css: string;
};

export type BrandingFormValues = {
    preset: string | null;
    primary_color: string;
    accent_color: string | null;
    heading_font: string;
    body_font: string;
};

export type BrandingLogoField = 'logo' | 'logo_dark' | 'icon';

export type BrandingLogos = Record<BrandingLogoField, string | null>;

export type BrandingPreset = {
    key: string;
    label: string;
    primary: string;
    accent: string;
};

export type BrandingFontOption = BrandFont & {
    category: 'sans' | 'serif' | 'display' | 'mono';
};

export type BrandingLogoLimits = {
    mimes: string[];
    maxKilobytes: number;
    minPixels: number;
    maxPixels: number;
};

/** Props for the settings and onboarding branding pages. */
export type BrandingPageProps = {
    branding: BrandingFormValues;
    logos: BrandingLogos;
    presets: BrandingPreset[];
    fonts: BrandingFontOption[];
    logoLimits: BrandingLogoLimits;
};