import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Surface, Text, IconButton } from 'react-native-paper';

export interface LocationMessageProps {
  /** Latitude of the shared location */
  lat: number;
  /** Longitude of the shared location */
  lng: number;
  /** Human-readable address string */
  address: string;
  /** Callback when the card is pressed */
  onPress?: () => void;
}

/**
 * Shared location card displayed in a chat conversation.
 * Shows a map marker icon and the address text.
 */
export function LocationMessage({ lat, lng, address, onPress }: LocationMessageProps) {
  const theme = useTheme();

  return (
    <Surface
      style={[
        styles.card,
        {
          backgroundColor: theme.colors.surfaceContainerHigh,
          borderRadius: 12,
        },
      ]}
      elevation={0}
      onPress={onPress}
    >
      <View style={styles.inner}>
        <IconButton
          icon="map-marker"
          size={24}
          iconColor={theme.colors.error}
          style={styles.icon}
        />
        <View style={styles.textContainer}>
          <Text
            variant="labelSmall"
            style={{ color: theme.colors.onSurfaceVariant }}
          >
            Shared location
          </Text>
          <Text
            variant="bodyMedium"
            numberOfLines={2}
            style={{ color: theme.colors.onSurface }}
          >
            {address}
          </Text>
        </View>
      </View>
    </Surface>
  );
}

const styles = StyleSheet.create({
  card: {
    paddingVertical: 8,
    paddingHorizontal: 4,
    maxWidth: 260,
    minHeight: 60,
  },
  inner: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  icon: {
    margin: 0,
  },
  textContainer: {
    flex: 1,
    gap: 2,
  },
});