/* The app's own mark and name (APP_NAME, "BizBook": a register, the record book for a business). The mark is an
   open record book with a rising line, in blue to purple. Drawn inline: nothing to download. */
import { usePage } from '@inertiajs/react';
import { useId } from 'react';
import { cx } from './ui';
import type { SharedProps } from '../types';

export function AppMark({ className }: { className?: string }) {
    const id = useId();
    return (
        <svg viewBox="0 0 32 32" className={cx('size-8 shrink-0', className)} aria-hidden>
            <defs>
                <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#2563eb" />
                    <stop offset="1" stopColor="#8b5cf6" />
                </linearGradient>
            </defs>
            <rect width="32" height="32" rx="9" fill={`url(#${id})`} />
            {/* an open book */}
            <path d="M6.5 10.2c3-1.3 6.2-1.2 9.5.8v12.3c-3.3-2-6.5-2.1-9.5-.8z" fill="#fff" />
            <path d="M25.5 10.2c-3-1.3-6.2-1.2-9.5.8v12.3c3.3-2 6.5-2.1 9.5-.8z" fill="#e0e7ff" />
            {/* a line going up, on the right-hand page */}
            <path d="M18.3 19.2l2.4-2.6 1.8 1.4 2-3" fill="none" stroke="#7c3aed" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    );
}

/** The mark, the name, and (optionally) what the app does. */
export function AppLogo({ className, tagline = false }: { className?: string; tagline?: boolean }) {
    const { appName } = usePage<SharedProps>().props;
    return (
        <span className={cx('inline-flex items-center gap-2.5', className)}>
            <AppMark className="!size-10" />
            <span className="text-left">
                <span className="block text-xl leading-tight font-extrabold tracking-tight text-ink">{appName}</span>
                {tagline && <span className="block text-xs leading-tight text-muted">Sales, stock and money, all in one book</span>}
            </span>
        </span>
    );
}