const shortcuts = [
  { keys: ['Ctrl', 'N'], label: 'New File' },
  { keys: ['Ctrl', 'O'], label: 'Open File' },
  { keys: ['Ctrl', 'P'], label: 'Command Palette' },
]

function Kbd({ keys }: { keys: string[] }) {
  return (
    <span className="inline-flex items-center gap-0.5">
      {keys.map((key, i) => (
        <span key={i}>
          {i > 0 && <span className="mx-0.5 text-text-muted text-ui-xs">+</span>}
          <kbd
            className="inline-flex items-center justify-center min-w-[22px] h-[18px] px-[3px] rounded text-[10px] font-mono font-medium leading-none bg-editor-surface text-text-primary border"
            style={{ borderColor: 'var(--color-panel-border)', boxShadow: '0 1px 0 var(--color-panel-border)' }}
          >
            {key}
          </kbd>
        </span>
      ))}
    </span>
  )
}

export default function WelcomeScreen() {
  return (
    <div className="flex-1 flex flex-col items-center justify-center select-none overflow-hidden">
      <div className="flex flex-col items-center gap-1 mb-6">
        <span
          className="text-[40px] font-bold leading-none tracking-tight bg-clip-text text-transparent select-none"
          style={{
            backgroundImage: 'linear-gradient(135deg, var(--color-accent) 0%, var(--color-text-muted) 100%)',
            opacity: 0.2,
          }}
        >
          YACE
        </span>
        <span
          className="text-[11px] leading-none text-text-muted select-none"
          style={{ opacity: 0.35 }}
        >
          Yet Another Code Editor
        </span>
      </div>

      <div className="flex flex-col gap-2">
        {shortcuts.map((item) => (
          <div
            key={item.label}
            className="flex items-center gap-3 px-3 py-1.5 rounded-md transition-all duration-150 hover:bg-panel-hover/40"
          >
            <Kbd keys={item.keys} />
            <span className="text-ui-sm text-text-secondary">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}