import { usePage } from '@inertiajs/react';
import type { ImgHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';

type PageProps = {
    companyLogoUrl?: string;
    hasCustomLogo?: boolean;
    companyName?: string;
};

export default function AppLogoIcon({
    className,
    alt = 'Sakoo',
    ...props
}: ImgHTMLAttributes<HTMLImageElement>) {
    const { companyLogoUrl, hasCustomLogo, companyName } = usePage<PageProps>().props;

    if (hasCustomLogo === false && companyName) {
        return (
            <div className={cn("flex items-center font-bold tracking-tight text-xl text-white whitespace-nowrap overflow-hidden text-ellipsis", className)}>
                {companyName}
            </div>
        );
    }

    return (
        <img
            src={companyLogoUrl ?? '/logo.png'}
            alt={companyName ?? alt}
            className={cn('h-auto w-auto object-contain', className)}
            {...props}
        />
    );
}