import { Folder, Pin, PinOff } from 'lucide-react';
import { getIcon } from 'material-file-icons';

type EntryRowProps = {
  name: string;
  subtitle?: string;
  type: 'file' | 'directory';
  pinned?: boolean;
  onPin?: () => void;
  onClick: () => void;
};

const MaterialFileIcon = ({ name, className }: { name: string; className?: string }) => {
  const svg = getIcon(name).svg;
  return <span className={className} dangerouslySetInnerHTML={{ __html: svg }} />;
};

export const EntryRow = ({ name, subtitle, type, pinned, onPin, onClick }: EntryRowProps) => (
  <li className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-duck-dark/5 group">
    <button onClick={onClick} className="flex items-center gap-2 flex-1 min-w-0 text-left cursor-pointer">
      {type === 'directory' ? (
        <Folder className="h-4 w-4 shrink-0 text-duck-teal" />
      ) : (
        <MaterialFileIcon name={name} className="inline-flex h-4 w-4 shrink-0" />
      )}
      <div className="min-w-0 flex-1">
        <span className="text-sm text-duck-dark truncate block">{name}</span>
        {subtitle && <span className="text-xs text-duck-dark/40 truncate block">{subtitle}</span>}
      </div>
    </button>
    {onPin && (
      <button
        onClick={(ev) => {
          ev.stopPropagation();
          onPin();
        }}
        className={`shrink-0 p-1 rounded transition-colors cursor-pointer ${
          pinned
            ? 'text-duck-teal hover:text-duck-teal/70'
            : 'text-duck-dark/20 opacity-0 group-hover:opacity-100 hover:text-duck-dark/50'
        }`}
      >
        {pinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
      </button>
    )}
  </li>
);
