'use client'

import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
import { Button } from "~/components/ui/button";
import { useMusicPlayer } from "./MusicPlayerProvider";

export default function PlayerControls() {
	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
		useMusicPlayer();

	return (
		<div className="flex items-center justify-center gap-1">
			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
				<SkipBack />
			</Button>
			<Button
				type="button"
				size="icon-lg"
				variant="secondary"
				aria-label={isPlaying ? "Pause" : "Play"}
				onClick={togglePlayCurrent}
			>
				{isPlaying ? <Pause /> : <Play />}
			</Button>
			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
				<SkipForward />
			</Button>
			<Button
				type="button"
				size="icon"
				variant={shuffle ? "secondary" : "ghost"}
				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
				aria-pressed={shuffle}
				onClick={toggleShuffle}
			>
				<Shuffle />
			</Button>
		</div>
	);
}