import { useNavigate } from 'react-router-dom'
import { ChefHat, Phone } from 'lucide-react'

export default function AppsPage() {
  const navigate = useNavigate()

  return (
    <div className="p-8">
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 max-w-2xl">
        <button
          onClick={() => navigate('/kds')}
          className="flex flex-col items-center gap-3 p-6 bg-white border border-slate-200 rounded-xl shadow-sm hover:border-sky-300 hover:shadow-md transition-all text-center group"
        >
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-sky-50 text-sky-600 group-hover:bg-sky-100 transition-colors">
            <ChefHat size={24} />
          </div>
          <div>
            <p className="text-[13px] font-semibold text-slate-800">KDS</p>
            <p className="text-[11px] text-slate-400 mt-0.5">Kitchen Display</p>
          </div>
        </button>

        <button
          onClick={() => navigate('/apps/phone')}
          className="flex flex-col items-center gap-3 p-6 bg-white border border-slate-200 rounded-xl shadow-sm hover:border-emerald-300 hover:shadow-md transition-all text-center group"
        >
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 group-hover:bg-emerald-100 transition-colors">
            <Phone size={24} />
          </div>
          <div>
            <p className="text-[13px] font-semibold text-slate-800">Τηλέφωνο</p>
            <p className="text-[11px] text-slate-400 mt-0.5">Caller ID</p>
          </div>
        </button>
      </div>
    </div>
  )
}