import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import Image from 'next/image';

interface BrandMarkProps {
  href?: string;
  priority?: boolean;
}

/**
 * BrandMark provides the consistent logo/wordmark for the application.
 * Aligned with "Precision Racing Minimal" theme.
 */
export function BrandMark({ href = '/', priority = false }: BrandMarkProps) {
  return (
    <Link href={href} variant="inherit" underline="none">
      <Box position="relative" display="inline-flex" alignItems="center">
        <Box height={{ base: '1.5rem', md: '1.75rem' }} style={{ transition: 'opacity 0.2s' }}>
          <Image
            src="/images/logos/wordmark-rectangle-dark.svg"
            alt="GridPilot"
            width={160}
            height={30}
            priority={priority}
            style={{ height: '100%', width: 'auto' }}
          />
        </Box>
        <Box 
          position="absolute" 
          bottom="-4px" 
          left="0" 
          width="0" 
          height="2px" 
          bg="var(--ui-color-intent-primary)" 
          style={{ transition: 'width 0.2s' }}
        />
      </Box>
    </Link>
  );
}