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
        borderColor="rgba(38, 38, 38, 0.8)"
        display="flex"
        alignItems="center"
        gap={4}
        hoverBorderColor="rgba(168, 85, 247, 0.3)"
        hoverBg="iron-gray/50"
        transition
        group
      >
        <Surface
          variant="muted"
          w="12"
          h="12"
          display="flex"
          center
          rounded="xl"
          bg="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 flex="1" minWidth="0">
          <Text weight="semibold" color="text-white" truncate groupHoverTextColor="purple-400" block>
            {teamName}
          </Text>
          <Stack direction="row" align="center" gap={2} mt={1}>
            <Badge variant="primary" bg="rgba(147, 51, 234, 0.1)" color="var(--neon-purple)" transform="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)" />
      </Surface>
    </Link>
  );
}
