'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ShieldOff, ArrowLeft, Home } from 'lucide-react';
import { useRouter } from 'next/navigation';

interface AccessDeniedProps {
  title?: string;
  description?: string;
  showBackButton?: boolean;
  showHomeButton?: boolean;
}

export function AccessDenied({
  title = '접근 권한이 없습니다',
  description = '이 페이지에 대한 접근 권한이 없습니다. 관리자에게 문의하세요.',
  showBackButton = true,
  showHomeButton = true,
}: AccessDeniedProps) {
  const router = useRouter();

  return (
    <div className="min-h-[calc(100vh-200px)] flex items-center justify-center p-4">
      <Card className="w-full max-w-lg border border-border/20 bg-card/50 backdrop-blur">
        <CardHeader className="text-center pb-4">
          <div className="flex justify-center mb-6">
            <div className="w-20 h-20 bg-gradient-to-br from-amber-500/20 to-orange-500/10 rounded-2xl flex items-center justify-center">
              <ShieldOff className="w-10 h-10 text-amber-500" />
            </div>
          </div>
          <CardTitle className="text-xl md:text-2xl font-bold text-foreground">
            {title}
          </CardTitle>
        </CardHeader>

        <CardContent className="text-center space-y-6">
          <p className="text-muted-foreground">{description}</p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
            {showBackButton && (
              <Button
                variant="outline"
                onClick={() => router.back()}
                className="rounded-xl"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                이전 페이지
              </Button>
            )}

            {showHomeButton && (
              <Button
                variant="outline"
                onClick={() => router.push('/dashboard')}
                className="rounded-xl"
              >
                <Home className="w-4 h-4 mr-2" />
                대시보드로 이동
              </Button>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
