import Image from 'next/image';
import Link from 'next/link';

import { cn } from '@spoon/ui';

export const LogoMark = ({ className }: { className?: string }) => (
  <span
    className={cn(
      'inline-flex size-9 items-center justify-center overflow-hidden rounded-md',
      className,
    )}
  >
    <Image
      src='/favicon.png'
      alt=''
      width={36}
      height={36}
      className='size-full object-cover'
      priority
    />
  </span>
);

export const SpoonLogo = ({ className }: { className?: string }) => (
  <Link href='/' className={cn('flex items-center gap-2', className)}>
    <LogoMark />
    <span className='text-xl font-semibold tracking-normal'>Spoon</span>
  </Link>
);
