import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { ChevronRight, Users } from 'lucide-react';

interface TeamMembershipCardProps {
  teamName: string;
  role: string;
  joinedAtLabel: string;
  href: string;
}

export function TeamMembershipCard({
  teamName,
  role,
  joinedAtLabel,
  href,
}: TeamMembershipCardProps) {
  return (
    <Link href={href}>
      <Surface
        variant="muted"
        padding={4}
        rounded="xl"
        border
        style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }}
        className="flex items-center gap-4 hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
      >
        <Surface
          variant="muted"
          w="12"
          h="12"
          display="flex"
          center
          rounded="xl"
          style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.2)' }}
          border
        >
          <Icon icon={Users} size={6} color="var(--neon-purple)" />
        </Surface>
        <Stack style={{ flex: 1, minWidth: 0 }}>
          <Text weight="semibold" color="text-white" className="truncate group-hover:text-purple-400 transition-colors" block>
            {teamName}
          </Text>
          <Stack direction="row" align="center" gap={2} mt={1}>
            <Badge variant="primary" style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', color: 'var(--neon-purple)', textTransform: 'capitalize' }}>
              {role}
            </Badge>
            <Text size="xs" color="text-gray-400">
              Since {joinedAtLabel}
            </Text>
          </Stack>
        </Stack>
        <Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" className="group-hover:text-purple-400 transition-colors" />
      </Surface>
    </Link>
  );
}