'use client';

import Link from 'next/link';
import { Clapperboard } from 'lucide-react';
import { Skeleton } from '../ui/skeleton';
import Image from 'next/image';
import { useState } from 'react';

export function Logo() {
  // For local demonstration, we'll use a local state.
  // In a real app, this would come from a global state/context or props.
  const [logoUrl, setLogoUrl] = useState<string | null>(null);
  const isLoading = false;

  return (
    <Link href="/" className="flex items-center gap-2 group">
      <div className="p-2 bg-primary rounded-lg group-hover:bg-accent transition-colors w-10 h-10 flex items-center justify-center">
        {isLoading ? (
            <Skeleton className="h-6 w-6" />
        ) : logoUrl ? (
            <div className="relative w-6 h-6">
                <Image src={logoUrl} alt="Logo" fill className="object-contain" unoptimized/>
            </div>
        ) : (
            <Clapperboard className="h-6 w-6 text-primary-foreground" />
        )}
      </div>
      <span className="text-xl font-bold font-headline tracking-wider text-foreground">
        POINT
      </span>
    </Link>
  );
}