import React, { memo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons';
import { useTheme, fontFamily } from '../../../theme';

interface ServiceGridItemProps {
  id: string;
  title: string;
  icon: string;
  iconColor?: string;
  onPress?: () => void;
  fullWidth?: boolean;
}

const ServiceGridItemComponent = ({
  title,
  icon,
  iconColor,
  onPress,
  fullWidth = false,
}: ServiceGridItemProps) => {
  const theme = useTheme();

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.container,
        {
          backgroundColor: theme.colors.surface,
          borderColor: theme.colors.cardBorder,
          borderRadius: 20,
          width: fullWidth ? '100%' : '48%',
          shadowColor: '#0F172A',
          shadowOffset: { width: 0, height: pressed ? 2 : 6 },
          shadowOpacity: pressed ? 0.025 : 0.055,
          shadowRadius: pressed ? 8 : 14,
          elevation: pressed ? 1 : 2,
          opacity: pressed ? 0.98 : 1,
          transform: [{ scale: pressed ? 0.992 : 1 }, { translateY: pressed ? 1 : 0 }],
        },
      ]}
    >
      <View
        style={[
          styles.iconFrame,
          {
            backgroundColor: `${iconColor || theme.colors.primary}12`,
            borderColor: `${iconColor || theme.colors.primary}18`,
          },
        ]}
      >
        <Ionicons name={icon as any} size={22} color={iconColor || theme.colors.primary} />
      </View>
      <Text style={[styles.title, { color: theme.colors.textPrimary }]} numberOfLines={2}>
        {title}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    minHeight: 112,
    justifyContent: 'space-between',
    borderWidth: 1,
    padding: 15,
    gap: 10,
    marginBottom: 14,
  },
  iconFrame: {
    width: 44,
    height: 44,
    borderRadius: 14,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 13,
    fontFamily: fontFamily.bold,
    letterSpacing: -0.2,
    lineHeight: 17,
  },
});

export const ServiceGridItem = memo(ServiceGridItemComponent);