import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"

export default function projectSharedNotification(
    colorScheme: ColorScheme
): Object {
    let layer = colorScheme.middle

    const avatarSize = 48
    return {
        windowHeight: 74,
        windowWidth: 380,
        background: background(layer),
        ownerContainer: {
            padding: 12,
        },
        ownerAvatar: {
            height: avatarSize,
            width: avatarSize,
            cornerRadius: avatarSize / 2,
        },
        ownerMetadata: {
            margin: { left: 10 },
        },
        ownerUsername: {
            ...text(layer, "sans", { size: "sm", weight: "bold" }),
            margin: { top: -3 },
        },
        message: {
            ...text(layer, "sans", "variant", { size: "xs" }),
            margin: { top: -3 },
        },
        worktreeRoots: {
            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
            margin: { top: -3 },
        },
        buttonWidth: 96,
        openButton: {
            background: background(layer, "accent"),
            border: border(layer, { left: true, bottom: true }),
            ...text(layer, "sans", "accent", {
                size: "xs",
                weight: "extra_bold",
            }),
        },
        dismissButton: {
            border: border(layer, { left: true }),
            ...text(layer, "sans", "variant", {
                size: "xs",
                weight: "extra_bold",
            }),
        },
    }
}