'use client'

import { ImagePlus } from 'lucide-react'

/**
 * Neutral "logo goes here" placeholder shown when no brand logo has been
 * uploaded or configured. Deliberately reads as an empty slot — a dashed
 * outline with a muted image icon — rather than a filled initials badge, which
 * looks like a user avatar (the real account avatar already lives top-right).
 *
 * It is automatically superseded the moment a logo is set in Settings →
 * Appearance, since every logo branch takes precedence over this fallback.
 */
export interface LogoPlaceholderProps {
  /** Color treatment so the slot blends with its surface. */
  tone: 'sidebar' | 'login'
  /** Brand/site name rendered beside the slot (expanded sidebar only). */
  label?: string
}

export function LogoPlaceholder({ tone, label }: LogoPlaceholderProps) {
  if (tone === 'login') {
    return (
      <span
        role="img"
        aria-label="Logo placeholder"
        title="Add a logo in Settings → Appearance"
        className="border-border text-muted-foreground mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-lg border border-dashed"
      >
        <ImagePlus className="h-6 w-6" aria-hidden="true" />
      </span>
    )
  }

  const slot = (
    <span
      className="border-sidebar-border text-sidebar-foreground/50 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-dashed"
      role={label ? undefined : 'img'}
      aria-hidden={label ? true : undefined}
      aria-label={label ? undefined : 'Logo placeholder'}
      title="Add a logo in Settings → Appearance"
    >
      <ImagePlus size={16} aria-hidden="true" />
    </span>
  )

  if (!label) return slot

  return (
    <div className="flex min-w-0 items-center gap-2.5">
      {slot}
      <span className="text-sidebar-foreground truncate text-sm font-medium">{label}</span>
    </div>
  )
}
