import { Outlet } from 'react-router-dom'

import { AppLogo } from '@/components/navigation/app-logo'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

export const AuthLayout = () => (
  <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-6 text-white">
    <div className="mb-8 text-center">
      <AppLogo className="text-white" />
      <p className="text-sm text-slate-300">Войдите, чтобы управлять воронкой продаж</p>
    </div>
    <Card className="w-full max-w-md border-white/10 bg-white/5 text-white">
      <CardHeader>
        <CardTitle>Kitchen CRM</CardTitle>
        <CardDescription className="text-slate-200">Мини-CRM с мультитенантной архитектурой</CardDescription>
      </CardHeader>
      <CardContent>
        <Outlet />
      </CardContent>
    </Card>
  </div>
)