'use client';

import { cn } from '@/lib/utils';
import { usePublicSettings } from '@/components/id/public-settings-provider';

function splitProjectName(projectName: string) {
  const trimmed = projectName.trim();
  const match = trimmed.match(/^(.+?)\s+ID$/i);
  if (match) {
    return { brand: match[1].trim(), suffix: 'ID' };
  }
  return { brand: trimmed || 'MVK', suffix: 'ID' };
}

export function BrandLogo({
  className,
  size = 'md',
  variant = 'dark'
}: {
  className?: string;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'dark' | 'light';
}) {
  const { projectName } = usePublicSettings();
  const { brand, suffix } = splitProjectName(projectName);

  const sizeClass = size === 'lg' ? 'text-2xl' : size === 'sm' ? 'text-lg' : 'text-xl';
  const badgeClass =
    variant === 'light'
      ? 'rounded-full border border-white px-1 text-base'
      : 'rounded-full bg-black px-1 text-sm text-white';

  return (
    <div className={cn('font-bold tracking-tight', sizeClass, className)}>
      {brand} <span className={badgeClass}>{suffix}</span>
    </div>
  );
}

export function ProjectTagline({ className }: { className?: string }) {
  const { projectTagline } = usePublicSettings();
  return <p className={className}>{projectTagline}</p>;
}