/*
 *  SuggestionGrid.tsx
 *  Zyquo Cloud Web
 *
 *  Author: Simon-Pierre Boucher
 *  Mail: contact@spboucher.ai
 *
 *  Empty-conversation state: centered Zyquo mark, greeting, model chip, and
 *  the four suggestion cards (matches the native EmptyStateView).
 */

import type { ReactNode } from 'react'
import ZyquoGlyph from './ZyquoGlyph'
import { IconCode, IconDoc, IconGlobe, IconLightbulb } from './icons'

const SUGGESTIONS = [
  {
    icon: <IconLightbulb />,
    title: 'Explain something',
    prompt: 'Explain how transformer attention works, with a concrete example.',
  },
  {
    icon: <IconCode />,
    title: 'Review my code',
    prompt: 'Review this code for bugs and suggest improvements:\n\n',
  },
  {
    icon: <IconDoc />,
    title: 'Summarize a document',
    prompt: 'Summarize the key points of the following document:\n\n',
  },
  {
    icon: <IconGlobe />,
    title: 'Translate',
    prompt: 'Translate the following text to French, keeping the tone natural:\n\n',
  },
]

export default function SuggestionGrid({
  onPick,
  modelChip,
}: {
  onPick: (prompt: string) => void
  modelChip?: ReactNode
}) {
  return (
    <div className="empty-state">
      <ZyquoGlyph size={72} />
      <div style={{ textAlign: 'center' }}>
        <h1 className="empty-title">Welcome to Zyquo Cloud</h1>
        <p className="empty-subtitle">Your keys, every cloud model, one beautiful chat.</p>
      </div>
      {modelChip}
      <div className="suggestion-grid">
        {SUGGESTIONS.map((suggestion) => (
          <button
            key={suggestion.title}
            className="suggestion-card"
            onClick={() => onPick(suggestion.prompt)}
          >
            <span className="glyph">{suggestion.icon}</span>
            {suggestion.title}
          </button>
        ))}
      </div>
    </div>
  )
}