export default function TitleBlock({
  name,
  filename,
  onNameClick,
}: {
  name: string;
  filename: string;
  onNameClick: () => void;
}) {
  const basename = filename.split('\\').pop()?.split('/').pop() || 'Unknown';
  return (
    <div className="mb-5px flex flex-col">
      <span
        className="font-bold text-lg text-white mb-1 cursor-pointer"
        onClick={onNameClick}
        onKeyDown={(e) => {}}
        title="Click to edit name"
        tabIndex={0}
        role="button"
        style={{ outline: 'none' }}
      >
        {name}
      </span>
      <span className="text-sm text-neutral-500">{basename}</span>
    </div>
  );
}