import thumbIcon from "../../images/icons/thumb-icon.svg";
import lsiLogo from "../../images/icons/lsi-logo.svg";

interface PlaceholderIconProps {
    alt?: string;
    compact?: boolean;
    src?: string;
}

export const PlaceholderIcon = ({
    alt = "",
    compact = false,
    src,
}: PlaceholderIconProps) => {
    const className = compact
        ? "icon-placeholder icon-placeholder--compact d-inline-flex"
        : "icon-placeholder d-inline-flex";

    return (
        <span className={className} aria-hidden={alt === ""}>
            {src ? <img src={src} alt={alt} /> : null}
        </span>
    );
};

export const BrandLockup = () => {
    return (
        <div
            className="brand-lockup d-inline-flex align-items-center min-w-0"
            aria-label="LSI Events Portal"
        >
            <img className="brand-logo" src={lsiLogo} alt="LSI" />
            <span className="brand-divider" aria-hidden="true" />
            <span className="brand-label">Events Portal</span>
        </div>
    );
};

interface AvatarProps {
    initials: string;
    small?: boolean;
}

export const Avatar = ({ initials, small = false }: AvatarProps) => {
    return (
        <span
            className={
                small
                    ? "avatar avatar--small d-inline-flex align-items-center justify-content-center"
                    : "avatar d-inline-flex align-items-center justify-content-center"
            }
        >
            {initials}
        </span>
    );
};

interface ImagePlaceholderProps {
    label: string;
    size?: "sm" | "md";
}

export const ImagePlaceholder = ({
    label,
    size = "md",
}: ImagePlaceholderProps) => {
    return (
        <div
            className={`image-placeholder image-placeholder--${size} d-inline-flex align-items-center justify-content-center`}
            aria-label={label}
        >
            <img src={thumbIcon} alt="" aria-hidden="true" />
        </div>
    );
};