import { useNavigate } from 'react-router-dom';
import Layout from '../components/Layout';

const TILES = [
  {
    title: 'Datenbankverwaltung',
    icon: '🗄️',
    description: 'Alle Tabellen, Datensätze, Filter und verknüpfte Felder.',
    path: '/db',
    color: 'border-indigo-200 hover:border-indigo-400 hover:bg-indigo-50',
  },
  {
    title: 'Contentverwaltung',
    icon: '✏️',
    description: 'Inhalte erstellen, bearbeiten und veröffentlichen.',
    path: null,
    color: 'border-slate-200 hover:border-slate-300 bg-slate-50 opacity-60 cursor-not-allowed',
    soon: true,
  },
];

export default function Dashboard() {
  const navigate = useNavigate();

  return (
    <Layout>
      <h2 className="text-xl font-semibold text-slate-700 mb-6">Dashboard</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-3xl">
        {TILES.map(tile => (
          <div
            key={tile.title}
            onClick={() => tile.path && navigate(tile.path)}
            className={`bg-white rounded-2xl border-2 p-6 transition-all ${tile.color} ${tile.path ? 'cursor-pointer' : ''}`}
          >
            <div className="text-4xl mb-3">{tile.icon}</div>
            <h3 className="font-semibold text-slate-800 text-lg mb-1">{tile.title}</h3>
            <p className="text-slate-500 text-sm">{tile.description}</p>
            {tile.soon && (
              <span className="mt-3 inline-block text-xs bg-slate-200 text-slate-500 rounded-full px-2 py-0.5">
                Demnächst
              </span>
            )}
          </div>
        ))}
      </div>
    </Layout>
  );
}