import { StyleSheet } from 'react-native';
import { ThemeColors } from '../../theme';

export const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    cardWrapper: {
      marginBottom: 16,
      borderRadius: 20,
      shadowColor: '#5B4CF5',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: 0.10,
      shadowRadius: 18,
      elevation: 6,
    },
    card: {
      backgroundColor: colors.card,
      borderRadius: 20,
      flexDirection: 'row',
      overflow: 'hidden',
      borderWidth: 1,
      borderColor: colors.border,
    },
    leftStrip: {
      width: 4,
      borderTopLeftRadius: 20,
      borderBottomLeftRadius: 20,
    },
    cardInner: {
      flex: 1,
      padding: 15,
      paddingLeft: 14,
    },
    topSection: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      marginBottom: 12,
    },
    avatar: {
      width: 48,
      height: 48,
      borderRadius: 24,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 12,
    },
    avatarText: {
      fontSize: 16,
      fontWeight: '800',
      color: '#FFFFFF',
      letterSpacing: 0.5,
    },
    meta: {
      flex: 1,
      minWidth: 0,
    },
    name: {
      fontSize: 15,
      fontWeight: '700',
      color: colors.text,
      marginBottom: 3,
      letterSpacing: 0.05,
    },
    companyRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 8,
      gap: 5,
      flexWrap: 'wrap',
    },
    companyText: {
      fontSize: 12,
      color: colors.textSecondary,
      fontWeight: '500',
      flexShrink: 1,
    },
    titleText: {
      fontSize: 11,
      color: colors.textMuted,
      flexShrink: 1,
    },
    dot: {
      width: 3,
      height: 3,
      borderRadius: 2,
      backgroundColor: colors.textMuted,
      opacity: 0.6,
    },
    statusBadge: {
      alignSelf: 'flex-start',
      flexDirection: 'row',
      alignItems: 'center',
      gap: 5,
      paddingHorizontal: 10,
      paddingVertical: 4,
      borderRadius: 20,
    },
    statusDot: {
      width: 5,
      height: 5,
      borderRadius: 3,
    },
    statusText: {
      fontSize: 10,
      fontWeight: '700',
      textTransform: 'uppercase',
      letterSpacing: 0.7,
    },
    separator: {
      height: StyleSheet.hairlineWidth,
      backgroundColor: colors.border,
      marginVertical: 11,
    },
    contacts: {
      gap: 8,
    },
    contactRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 9,
    },
    iconWrap: {
      width: 28,
      height: 28,
      borderRadius: 9,
      justifyContent: 'center',
      alignItems: 'center',
    },
    contactText: {
      fontSize: 12,
      color: colors.textSecondary,
      flex: 1,
    },
    actionBtn: {
      width: 28,
      height: 28,
      borderRadius: 9,
      justifyContent: 'center',
      alignItems: 'center',
    },
    footer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: 12,
      paddingTop: 10,
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: colors.border,
    },
    sourcePill: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.surface,
      borderRadius: 20,
      paddingHorizontal: 9,
      paddingVertical: 4,
      gap: 5,
      borderWidth: 1,
      borderColor: colors.border,
    },
    sourceText: {
      fontSize: 10,
      color: colors.textMuted,
      fontWeight: '600',
      textTransform: 'uppercase',
      letterSpacing: 0.5,
    },
    dateRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
    },
    dateText: {
      fontSize: 10,
      color: colors.textMuted,
    },
  });