import React from 'react';
import { Pressable, View, Text, StyleSheet, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { durationFormatter } from './DurationFormatter';

export default function TrackRow({
  title,
  artist,
  duration,
  cover,
  onPress,
  liked = false,
  onToggleLike,
}) {
  return (
    <Pressable style={styles.trackItem} onPress={onPress}>
      {cover ? (
        <Image source={cover} style={styles.trackCover} resizeMode="cover" />
      ) : (
        <View style={[styles.trackCover, styles.trackCoverPlaceholder]}>
          <Ionicons name="musical-note" size={18} color="#555" />
        </View>
      )}

      <View style={styles.trackTextBlock}>
        <Text style={styles.trackTitle} numberOfLines={1}>{title}</Text>
        <Text style={styles.trackArtist} numberOfLines={1}>{artist}</Text>
      </View>

      <Text style={styles.trackDuration}>
        {duration ? durationFormatter(duration) : "--"}
      </Text>

      <Pressable onPress={onToggleLike} hitSlop={10} style={styles.heartBtn}>
        <Ionicons
          name={liked ? "heart" : "heart-outline"}
          size={22}
          color={liked ? "#ff4d6d" : "#fff"}
        />
      </Pressable>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  trackItem: {
    width: '100%',
    minHeight: 62,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  trackCover: {
    width: 46,
    height: 46,
    borderRadius: 6,
    marginRight: 10,
  },
  trackCoverPlaceholder: {
    backgroundColor: '#222',
    justifyContent: 'center',
    alignItems: 'center',
  },
  trackTextBlock: {
    flex: 1,
  },
  trackTitle: {
    color: '#ffffff',
    fontSize: 15,
    fontWeight: '700',
  },
  trackArtist: {
    color: '#ffffff',
    fontSize: 15,
    marginTop: 2,
  },
  trackDuration: {
    color: '#ffffff',
    fontSize: 15,
    paddingHorizontal: 18,
  },
  heartBtn: {
    width: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
