import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet, SafeAreaView } from 'react-native';

export default function App() {
  const [playing, setPlaying] = useState(true);
  const [liked, setLiked] = useState(false);
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.top}>
        <Text style={s.topLabel}>PLAYING FROM</Text>
        <Text style={s.topName}>Late Night Drive</Text>
      </View>
      <View style={s.artWrap}>
        <View style={s.art}><Text style={s.artEmoji}>🌌</Text></View>
      </View>
      <View style={s.meta}>
        <View style={{ flex: 1 }}>
          <Text style={s.song}>Midnight City</Text>
          <Text style={s.artist}>Neon Coast</Text>
        </View>
        <Pressable onPress={() => setLiked((l) => !l)}><Text style={s.heart}>{liked ? '❤️' : '🤍'}</Text></Pressable>
      </View>
      <View style={s.scrub}><View style={s.scrubFill} /><View style={s.knob} /></View>
      <View style={s.times}><Text style={s.time}>1:42</Text><Text style={s.time}>3:58</Text></View>
      <View style={s.controls}>
        <Text style={s.ctrlSm}>🔀</Text>
        <Text style={s.ctrl}>⏮</Text>
        <Pressable onPress={() => setPlaying((p) => !p)} style={s.play}>
          <Text style={s.playIcon}>{playing ? '⏸' : '▶'}</Text>
        </Pressable>
        <Text style={s.ctrl}>⏭</Text>
        <Text style={s.ctrlSm}>🔁</Text>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0814' },
  top: { paddingTop: 60, alignItems: 'center' },
  topLabel: { color: '#9A7FC9', fontSize: 11, fontWeight: '700', letterSpacing: 2 },
  topName: { color: '#fff', fontSize: 16, fontWeight: '600', marginTop: 4 },
  artWrap: { alignItems: 'center', marginTop: 34 },
  art: { width: 300, height: 300, borderRadius: 28, backgroundColor: '#1C1230', alignItems: 'center', justifyContent: 'center' },
  artEmoji: { fontSize: 120 },
  meta: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 30, marginTop: 40 },
  song: { color: '#fff', fontSize: 26, fontWeight: '800' },
  artist: { color: '#9A7FC9', fontSize: 17, marginTop: 4 },
  heart: { fontSize: 26 },
  scrub: { height: 5, borderRadius: 3, backgroundColor: '#241934', marginHorizontal: 30, marginTop: 30, justifyContent: 'center' },
  scrubFill: { position: 'absolute', left: 0, width: '43%', height: 5, borderRadius: 3, backgroundColor: '#A855F7' },
  knob: { position: 'absolute', left: '43%', width: 14, height: 14, borderRadius: 7, backgroundColor: '#fff' },
  times: { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 30, marginTop: 12 },
  time: { color: '#7A6699', fontSize: 13 },
  controls: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 40, marginTop: 36 },
  ctrl: { fontSize: 34, color: '#fff' },
  ctrlSm: { fontSize: 22 },
  play: { width: 76, height: 76, borderRadius: 38, backgroundColor: '#A855F7', alignItems: 'center', justifyContent: 'center' },
  playIcon: { fontSize: 30, color: '#fff' },
});