import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Colors } from '../../constants/theme';
import { Category } from '../../types';

interface Props {
  category: Category;
  onPress: (slug: string) => void;
}

export const CategoryCard: React.FC<Props> = ({ category, onPress }) => {
  return (
    <TouchableOpacity style={styles.container} onPress={() => onPress(category.slug)}>
      <ExpoImage
        source={{ uri: category.image }}
        style={StyleSheet.absoluteFill}
        contentFit="cover"
      />
      {/* Dark gradient overlay at the bottom for text readability */}
      <LinearGradient
        colors={['transparent', 'rgba(0,0,0,0.65)']}
        style={styles.gradient}
      />
      <View style={styles.labelContainer}>
        <Text style={styles.name} numberOfLines={1}>{category.name}</Text>
        {category.services_count !== undefined && (
          <Text style={styles.count}>{category.services_count} Serviços</Text>
        )}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 110,
    height: 110,
    borderRadius: 12,
    marginRight: 12,
    overflow: 'hidden',
    backgroundColor: Colors.light.surface,
    justifyContent: 'flex-end',
  },
  gradient: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: '60%',
  },
  labelContainer: {
    padding: 8,
  },
  name: {
    fontSize: 12,
    fontWeight: '700',
    color: '#FFF',
  },
  count: {
    fontSize: 10,
    color: 'rgba(255,255,255,0.75)',
    marginTop: 1,
  },
});