import { NewDocumentIcon } from '../../icons';

type TileStartViewProps = {
  className?: string;
  /** Create a new file and open it in this tile. Absent when no provider is selected. */
  onNewFile?: () => void;
};

/**
 * Default content for a tile whose active tab holds no document. Shows a short
 * list of quick actions rather than an "Untitled" tab. For now the only action
 * is opening a new file.
 */
export function TileStartView({ className, onNewFile }: TileStartViewProps) {
  return (
    <div
      className={`border-border flex flex-col items-center justify-center rounded-md border border-dashed p-5 ${className ?? ''}`}
    >
      <div className="text-foreground/40 mb-3 text-xs font-medium tracking-wide uppercase">
        Quick actions
      </div>
      <ul className="flex flex-col items-stretch gap-1">
        <li>
          <button
            type="button"
            onClick={onNewFile}
            disabled={!onNewFile}
            className="text-accent hover:bg-border/30 flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-sm hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50"
          >
            <NewDocumentIcon className="size-4 shrink-0" />
            New File
          </button>
        </li>
      </ul>
    </div>
  );
}