FarmaFinder/apps/frontend-mobile/components/MedicineCard.tsx

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useThemeContext } from './ThemeProvider';
import { spacing, borderRadius } from '../constants/theme';
import { StockBadge } from './StockBadge';
import { Medicine } from '../types';
import { useTranslation } from '../src/i18n';

const TABLET_MIN_WIDTH = 768;

interface MedicineCardProps {
  medicine: Medicine;
}

export function MedicineCard({ medicine }: MedicineCardProps) {
  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
  const { colors } = useThemeContext();
  const { t } = useTranslation();

  const handlePress = () => {
    router.push(`/medicine/${medicine.nregistro}`);
  };

  return (
    <TouchableOpacity
      style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.card }]}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <View style={styles.header}>
        <Text style={[styles.name, isTablet && styles.nameTablet, { color: colors.text }]} numberOfLines={2}>
          {medicine.name}
        </Text>
        {medicine.stock != null && <StockBadge stock={medicine.stock} />}
      </View>

      <Text style={[styles.principioActivo, { color: colors.textSecondary }]} numberOfLines={1}>
        {medicine.active_ingredient}{medicine.dosage ? ` - ${medicine.dosage}` : ''}
      </Text>

      <View style={styles.footer}>
        <View style={styles.priceContainer}>
          <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
          <Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
            {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : t('medicineCard.noPrice')}
          </Text>
        </View>

        <View style={styles.labContainer}>
          <Ionicons name="business" size={14} color={colors.textSecondary} />
          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet, { color: colors.textSecondary }]} numberOfLines={1}>
            {medicine.laboratory}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: borderRadius.lg,
    padding: spacing.md,
    marginHorizontal: spacing.lg,
    marginVertical: spacing.xs,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
    shadowRadius: 8,
    elevation: 2,
  },
  cardTablet: {
    padding: spacing.lg,
    maxWidth: 700,
    alignSelf: 'center',
    width: '100%',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: spacing.xs,
  },
  name: {
    flex: 1,
    fontSize: 16,
    fontWeight: '600',
    marginRight: spacing.sm,
  },
  nameTablet: {
    fontSize: 18,
  },
  principioActivo: {
    fontSize: 14,
    marginBottom: spacing.sm,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  price: {
    fontSize: 14,
    fontWeight: '600',
    marginLeft: spacing.xs,
  },
  priceTablet: {
    fontSize: 16,
  },
  labContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'flex-end',
  },
  laboratorio: {
    fontSize: 12,
    marginLeft: spacing.xs,
    maxWidth: 120,
  },
  laboratorioTablet: {
    fontSize: 14,
    maxWidth: 200,
  },
});