import { Text } from '@/components/ui/Typography';
import { Flex, Stack } from '@/components/ui/layout';
import Badge from '@/components/ui/Badge';
import { MapPin } from 'lucide-react';
import React from 'react';
import { useTranslation } from '@/hooks/useI18n';

interface MatchCardMetadataProps {
  organizationName?: string;
  distanceKm?: number | null;
  availabilityStatus?: string | null;
  tags?: string[];
  organizationLabelTKey: string;
  distanceTKey: string;
  maxTags?: number;
}

/**
 * Reusable metadata component for discovery match cards
 * Displays organization info, location, availability, and tags
 */
export const MatchCardMetadata: React.FC<MatchCardMetadataProps> = ({
  organizationName,
  distanceKm,
  availabilityStatus,
  tags = [],
  organizationLabelTKey,
  distanceTKey,
  maxTags = 4,
}) => {
  const { t } = useTranslation();
  const hasMetadata =
    organizationName ||
    (distanceKm != null && distanceKm > 0) ||
    availabilityStatus ||
    tags.length > 0;

  if (!hasMetadata) {
    return null;
  }

  const displayedTags = tags.slice(0, maxTags);
  const remainingTagsCount = tags.length - maxTags;

  return (
    <Stack spacing="sm" className="border-t border-border pt-3">
      {/* Organization Information */}
      {organizationName && (
        <Text variant="small" as="div">
          <Text variant="muted" as="span">
            {t(organizationLabelTKey)}:{' '}
          </Text>
          <Text variant="small" as="span" className="font-medium">
            {organizationName}
          </Text>
        </Text>
      )}

      {/* Location & Distance */}
      {distanceKm != null && distanceKm > 0 && (
        <Flex align="center" gap="xs" className="text-sm">
          <MapPin className="h-4 w-4" />
          <Text
            variant="muted"
            tKey={distanceTKey}
            replacements={{ distance: distanceKm.toFixed(1) }}
          />
        </Flex>
      )}

      {/* Availability Status */}
      {availabilityStatus && (
        <Flex align="center" gap="sm">
          <Badge
            variant={
              availabilityStatus === 'available'
                ? 'success'
                : availabilityStatus === 'limited'
                  ? 'secondary'
                  : 'outline'
            }
            className="text-xs"
          >
            {availabilityStatus}
          </Badge>
        </Flex>
      )}

      {/* Tags */}
      {tags.length > 0 && (
        <Flex wrap="wrap" gap="xs" className="pt-2">
          {displayedTags.map((tag, idx) => (
            <Badge key={idx} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
          {remainingTagsCount > 0 && (
            <Badge variant="outline" className="text-xs">
              +{remainingTagsCount}
            </Badge>
          )}
        </Flex>
      )}
    </Stack>
  );
};

export default React.memo(MatchCardMetadata);