'use client';

import Link from 'next/link';
import { ShieldOff } from 'lucide-react';

interface PermissionDeniedProps {
  sectionName?: string;
}

export default function PermissionDenied({ sectionName }: PermissionDeniedProps) {
  const label = sectionName ?? 'this section';

  return (
    <div className="flex items-center justify-center min-h-[60vh] p-6">
      <div
        className="flex flex-col items-center text-center max-w-sm w-full p-8 rounded-2xl"
        style={{
          backgroundColor: 'hsl(var(--card))',
          border: '1px solid hsl(var(--border))',
          boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
        }}
      >
        <div
          className="w-16 h-16 rounded-full flex items-center justify-center mb-5"
          style={{ backgroundColor: 'hsl(var(--muted))' }}
        >
          <ShieldOff size={28} style={{ color: 'hsl(var(--muted-foreground))' }} />
        </div>

        <h2 className="text-xl font-bold mb-2" style={{ color: 'hsl(var(--foreground))' }}>
          No permission
        </h2>

        <p className="text-sm mb-6" style={{ color: 'hsl(var(--muted-foreground))' }}>
          You don&apos;t have access to {label}. Contact your administrator if you believe this is a mistake.
        </p>

        <Link
          href="/dashboard"
          className="inline-flex items-center justify-center rounded-lg px-6 py-2.5 text-sm font-semibold transition-colors"
          style={{
            backgroundColor: 'hsl(var(--primary))',
            color: 'hsl(var(--primary-foreground))',
          }}
        >
          Back to dashboard
        </Link>
      </div>
    </div>
  );
}