refactor star

app/components/Star.tsx

@@ -1,8 +1,11 @@
+import { useStar } from '@app/hooks/music'
 import colors from '@app/styles/colors'
 import React from 'react'
+import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
 import IconFA from 'react-native-vector-icons/FontAwesome'
+import PressableOpacity from './PressableOpacity'
 
-const Star = React.memo<{
+export const Star = React.memo<{
   starred: boolean
   size: number
 }>(({ starred, size }) => {
@@ -11,4 +14,17 @@ const Star = React.memo<{
   )
 })
 
-export default Star
+export const PressableStar = React.memo<{
+  id: string
+  type: 'album' | 'artist' | 'song'
+  size: number
+  style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
+}>(({ id, type, size, style }) => {
+  const { starred, toggleStar } = useStar(id, type)
+
+  return (
+    <PressableOpacity onPress={toggleStar} style={style}>
+      <Star size={size} starred={starred} />
+    </PressableOpacity>
+  )
+})