'use client';

import { MessageSquarePlus, Sparkles } from 'lucide-react';

export default function WorkspaceHomePage() {
  return (
    <div className="flex min-h-screen items-center justify-center px-6">
      <div className="w-full max-w-2xl rounded-xl border border-white/10 bg-[var(--surface-card)] p-8 text-center">
        <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-[var(--surface-muted)]">
          <Sparkles size={22} className="text-[var(--accent-secondary)]" />
        </div>
        <h1 className="mb-2 text-2xl font-semibold text-[var(--text-primary)]">
          Start a conversation
        </h1>
        <p className="mb-6 text-sm text-[var(--text-secondary)]">
          Use New Conversation from the sidebar, or choose a Quick Action to begin.
        </p>
        <div className="mx-auto grid max-w-xl gap-3 sm:grid-cols-2">
          {['Code Review', 'Debug Error', 'Deep Think', 'Draft Email'].map(item => (
            <button
              key={item}
              type="button"
              className="flex items-center gap-2 rounded-md border border-white/10 bg-[var(--surface-muted)] px-3 py-2 text-left text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
            >
              <MessageSquarePlus size={16} />
              <span>{item}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
