import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import {colors, typography} from '../../utils/colors';

interface Props {
  cast?: string[];
  director?: string[];
}

export default function CastRow({cast, director}: Props) {
  if (!cast?.length && !director?.length) return null;

  return (
    <View style={styles.container}>
      {director && director.length > 0 && (
        <View style={styles.row}>
          <Text style={styles.label}>Director</Text>
          <Text style={styles.value}>{director.join(', ')}</Text>
        </View>
      )}
      {cast && cast.length > 0 && (
        <View>
          <Text style={[styles.label, {marginBottom: 8}]}>Cast</Text>
          <FlatList
            data={cast.slice(0, 12)}
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, idx) => `${item}-${idx}`}
            contentContainerStyle={{paddingHorizontal: 16, gap: 12}}
            renderItem={({item}) => (
              <View style={styles.castChip}>
                <View style={styles.castAvatar}>
                  <Text style={styles.castAvatarText}>
                    {item[0]?.toUpperCase() ?? '?'}
                  </Text>
                </View>
                <Text style={styles.castName} numberOfLines={2}>
                  {item}
                </Text>
              </View>
            )}
          />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {marginBottom: 16},
  row: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    marginBottom: 10,
    gap: 8,
    alignItems: 'flex-start',
  },
  label: {
    ...typography.caption,
    color: colors.textMuted,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    minWidth: 60,
    paddingHorizontal: 16,
  },
  value: {
    ...typography.body,
    color: colors.textSecondary,
    flex: 1,
  },
  castChip: {
    alignItems: 'center',
    width: 70,
  },
  castAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: colors.surfaceHighlight,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 4,
  },
  castAvatarText: {
    ...typography.title,
    color: colors.textMuted,
  },
  castName: {
    ...typography.caption,
    color: colors.textSecondary,
    textAlign: 'center',
    fontSize: 11,
  },
});