import { Images } from 'lucide-react';
import { PHOTOS_SECTIONS } from './shared';
import { usePhotosSection } from './usePhotosSection';

// Panel header for the right (photos-view) panel.

export const PhotosViewHeader = () => {
  const section = usePhotosSection();
  const label = PHOTOS_SECTIONS.find((s) => s.id === section)?.label ?? 'Photos';

  return (
    <>
      <Images className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">{label}</span>
    </>
  );
};