"use client";

import type { HTMLAttributes } from "react";
import { cx } from '../../utils/cx';
import { KeystoneLogoMinimal } from "./keystone-logo-minimal";

export const KeystoneLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {
    return (
        <div {...props} className={cx("flex h-8 w-max items-center justify-start overflow-visible", props.className)}>
            {/* Minimal logo */}
            <KeystoneLogoMinimal className="aspect-square h-full w-auto shrink-0" />

            {/* Gap that adjusts to the height of the container */}
            <div className="aspect-[0.4] h-full" />

            {/* Clean text logo */}
            <div className="flex items-center">
                <span className="text-lg font-semibold text-fg-primary">Keystone</span>
            </div>
        </div>
    );
};
