import React from 'react';
import Link from 'next/link';
import { Users, ChevronRight } from 'lucide-react';

interface TeamMembership {
  teamId: string;
  teamName: string;
  teamTag?: string;
  role: string;
  joinedAt: string;
}

interface TeamMembershipCardProps {
  membership: TeamMembership;
}

export default function TeamMembershipCard({ membership }: TeamMembershipCardProps) {
  return (
    <Link
      href={`/teams/${membership.teamId}`}
      className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
    >
      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600/20 border border-purple-600/30">
        <Users className="w-6 h-6 text-purple-400" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
          {membership.teamName}
        </p>
        <div className="flex items-center gap-2 text-xs text-gray-400">
          <span className="px-2 py-0.5 rounded-full bg-purple-600/20 text-purple-400 capitalize">
            {membership.role}
          </span>
          <span>
            Since {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
          </span>
        </div>
      </div>
      <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-purple-400 transition-colors" />
    </Link>
  );
}