'use client';

import Card from '@/components/ui/Card';
import { FaUserTag } from 'react-icons/fa';

export default function RoleDisplay({ userRole }: { userRole: string | null }) {
  const getRoleBadgeColor = (role: string | null) => {
    switch (role?.toLowerCase()) {
      case 'admin':
        return 'badge-primary';
      case 'team':
        return 'badge-secondary';
      case 'user':
        return 'badge-accent';
      default:
        return 'badge-ghost';
    }
  };

  return (
    <Card
      title="Вашата Роля"
      description="Вашата определена роля в системата"
    >
      <div className="flex items-center gap-3">
        <div className="bg-transparent p-3 rounded-lg">
          <FaUserTag className="w-5 h-5 text-primary" />
        </div>
        <div>
          <div className={`badge ${getRoleBadgeColor(userRole)} badge-lg font-medium`}>
            {userRole || 'Няма определена роля'}
          </div>
          <p className="mt-1 text-sm text-base-content/70">
            {userRole ? 'Имате достъп до функции според вашата роля' : 'Свържете се с администратор за определяне на роля'}
          </p>
        </div>
      </div>
    </Card>
  );
}