'use client';

import { File, Folder, FolderOpen } from 'lucide-react';
import { cn } from '@djangocfg/ui-core/lib';

import { useTreeContext } from '../context/TreeContext';

export interface TreeIconProps {
  isFolder: boolean;
  isExpanded: boolean;
  className?: string;
}

export function TreeIcon({ isFolder, isExpanded, className }: TreeIconProps) {
  const { appearance } = useTreeContext();
  const Icon = isFolder ? (isExpanded ? FolderOpen : Folder) : File;
  return (
    <Icon
      aria-hidden
      strokeWidth={appearance.iconStrokeWidth}
      style={{ width: 'var(--tree-icon-size)', height: 'var(--tree-icon-size)' }}
      className={cn(
        'shrink-0',
        isFolder ? 'text-foreground/70' : 'text-muted-foreground/80',
        className,
      )}
    />
  );
}
