// import { Button } from './ui/button';
// import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
// import { Users, GraduationCap, Shield } from 'lucide-react';
import { useAuth } from '../lib/authContext';

export function RoleSwitcher() {
  const { user, updateProfile } = useAuth();

  const switchRole = (role: 'student' | 'sheikh' | 'admin') => {
    updateProfile({ role, profileCompleted: true });
    window.location.reload();
  };

  return (
    <div className="fixed bottom-4 right-4 z-50">
      {/* <Card className="w-80 shadow-lg border-2">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">Role Switcher (Dev Only)</CardTitle>
          <CardDescription className="text-xs">
            Current: <span className="font-semibold capitalize">{user?.role}</span>
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-2">
          <Button
            onClick={() => switchRole('student')}
            variant={user?.role === 'student' ? 'default' : 'outline'}
            className="w-full justify-start"
            size="sm"
          >
            <Users className="h-4 w-4 mr-2" />
            Student
          </Button>
          <Button
            onClick={() => switchRole('sheikh')}
            variant={user?.role === 'sheikh' ? 'default' : 'outline'}
            className="w-full justify-start"
            size="sm"
          >
            <GraduationCap className="h-4 w-4 mr-2" />
            Sheikh
          </Button>
          <Button
            onClick={() => switchRole('admin')}
            variant={user?.role === 'admin' ? 'default' : 'outline'}
            className="w-full justify-start"
            size="sm"
          >
            <Shield className="h-4 w-4 mr-2" />
            Admin
          </Button>
        </CardContent>
      </Card> */}
    </div>
  );
}