'use client';

import { Badge } from '@/components/ui/badge';
import type { Permission } from '@/lib/auth/permissions';

export function EffectivePermissionPreview({
  permissions
}: {
  permissions: Permission[];
}) {
  return (
    <div className='space-y-3 rounded-lg border p-4'>
      <div>
        <h3 className='font-medium'>Effective Permissions Preview</h3>
        <p className='text-muted-foreground text-sm'>
          สิทธิ์สุดท้ายที่จะมีผลหลังรวม Template และ Override
        </p>
      </div>
      <div className='flex flex-wrap gap-2'>
        {permissions.length > 0 ? (
          permissions.map((permission) => (
            <Badge key={permission} variant='outline'>
              {permission}
            </Badge>
          ))
        ) : (
          <span className='text-muted-foreground text-sm'>ยังไม่มีสิทธิ์ที่เลือกไว้</span>
        )}
      </div>
    </div>
  );
}
