/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/ui/Logo.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Import project module (@/ alias = src/ folder in tsconfig)
import AppImage from '@/components/ui/AppImage';
// Import project module (@/ alias = src/ folder in tsconfig)
import { IMAGES } from '@/lib/images';
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// (blank line — separates logical blocks for readability)
// TypeScript interface — contract for object properties and methods
interface LogoProps {
  // Line 6: size?: 'sm' | 'md' | 'lg';
  size?: 'sm' | 'md' | 'lg';
  // Line 7: className?: string;
  className?: string;
// Closing brace — end of block (function, if, object, JSX)
}
// (blank line — separates logical blocks for readability)
// Line 10: const sizes = {
const sizes = {
  // Property or array item — trailing comma allowed in TypeScript
  sm: 'h-10 w-10',
  // Property or array item — trailing comma allowed in TypeScript
  md: 'h-12 w-12',
  // Property or array item — trailing comma allowed in TypeScript
  lg: 'h-20 w-20',
// Closing brace — end of block (function, if, object, JSX)
};
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function Logo({ size = 'md', className }: LogoProps) {
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div
      // Tailwind CSS utility classes — styling (colors, spacing, layout)
      className={cn(
        // Property or array item — trailing comma allowed in TypeScript
        'relative shrink-0 overflow-hidden rounded-full ring-2 ring-cream-200',
        // Property or array item — trailing comma allowed in TypeScript
        sizes[size],
        // Line 22: className
        className
      // Line 23: )}
      )}
    // Line 24: >
    >
      // JSX element — HTML-like tag becomes React component in browser
      <AppImage
        // Line 26: src={IMAGES.logo}
        src={IMAGES.logo}
        // Line 27: alt="Kött Gård"
        alt="Kött Gård"
        // Line 28: fill
        fill
        // Tailwind CSS utility classes — styling (colors, spacing, layout)
        className="object-cover"
        // Line 30: sizes="(max-width: 640px) 40px, 80px"
        sizes="(max-width: 640px) 40px, 80px"
        // Line 31: priority
        priority
        // Line 32: quality={95}
        quality={95}
      // Line 33: />
      />
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 35: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
