import Link from 'next/link';
import { Utensils } from 'lucide-react';

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

export const LogoMark = ({ className }: { className?: string }) => (
  <span
    className={cn(
      'bg-primary text-primary-foreground inline-flex size-9 items-center justify-center rounded-md',
      className,
    )}
  >
    <Utensils className='size-5' />
  </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>
);
