'use client';

import { MoreVertical, Mail, Shield, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

interface UserMobileCardProps {
    name: string;
    email: string;
    role: string;
    joinedAt?: string;
    status: 'active' | 'inactive';
}

export const UserMobileCard: React.FC<UserMobileCardProps> = ({ name, email, role, joinedAt, status }) => {

    return (
        <div className="bg-card border border-border rounded-xl p-4 shadow-sm md:hidden active:scale-[0.99] transition-all">
            {/* Header section */}
            <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                    {/* Avatar will be here */}
                    <div className="size-11 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
                        <span className="text-primary font-bold text-sm">
                            {name.split(" ").map(n => n[0]).join("")}
                        </span>
                    </div>
                    <div className="flex flex-col">
                        <span className="font-semibold text-foreground leading-none">{name}</span>
                        <span className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
                            <Mail className="size-3" />
                            {email}
                        </span>
                    </div>
                </div>

                <Badge
                    variant={status === "active" ? "default" : "secondary"}
                    className="text-[10px] px-2 py-0 h-5"
                >
                    {status}
                </Badge>
            </div>

            {/* Footer section: role and options */}
            <div className="flex items-center justify-between mt-5 pt-3 border-t border-border/50">
                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                    <Shield className="size-3 text-primary/70" />
                    <span>Role: <b className="text-foreground font-medium">{role}</b></span>
                </div>
                <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
                    <Calendar className="size-3" />
                    <span>Joined: {joinedAt}</span>
                </div>
                <Button variant="ghost" size="icon-xs" className="text-muted-foreground">
                    <MoreVertical className="size-4" />
                </Button>
            </div>
        </div>
    )

}