"use client";
import Link from "next/link";
import { useSiteSettings } from './site-settings';

export function Brand({ inverse = false }: { inverse?: boolean }) {
  const settings = useSiteSettings();
  if (settings.brand || settings.general) return <Link href="/" className={`brand ${inverse ? 'brand-inverse' : ''}`} aria-label={`${settings.brand?.name ?? settings.general?.title} home`}>
    {settings.brand?.logo ? <img src={settings.brand.logo} alt="" width={44} height={44} style={{ objectFit: 'contain' }} /> : <span className="brand-mark" aria-hidden="true">{settings.brand?.monogram ?? 'FM'}</span>}
    <span className="brand-wordmark">{settings.brand?.name ?? settings.general?.title}<small>{settings.general?.tagline ?? 'Wear your everyday.'}</small></span>
  </Link>;
  return (
    <Link href="/" className={`brand ${inverse ? "brand-inverse" : ""}`} aria-label="Fashion Mart home">
      <span className="brand-mark" aria-hidden="true"><span>f</span><span>m</span></span>
      <span className="brand-wordmark">FASHION MART<small>Wear your everyday.</small></span>
    </Link>
  );
}