"use client";

import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import {
  FastForward,
  Pause,
  Play,
  Rewind,
  SkipBack,
  SkipForward,
  Volume2,
} from "lucide-react";
import Image from "next/image";
import { useState } from "react";

export function PodcastPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <div className="fixed bottom-0 left-0 right-0 border-t bg-background p-4">
      <div className="mx-auto flex max-w-7xl items-center justify-between">
        <div className="flex items-center gap-4">
          <Image
            src="https://picsum.photos/48"
            alt="Episode Cover"
            width={48}
            height={48}
            className="rounded-md"
          />
          <div>
            <h4 className="text-sm font-medium">قسمت اول: داستان پارچ</h4>
            <p className="text-xs text-muted-foreground">Efoux</p>
          </div>
        </div>
        <div className="flex flex-col items-center gap-1 md:w-1/2">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <SkipBack className="h-4 w-4" />
              <span className="sr-only">Previous</span>
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <Rewind className="h-4 w-4" />
              <span className="sr-only">Rewind</span>
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="h-10 w-10 rounded-full"
              onClick={() => setIsPlaying(!isPlaying)}
            >
              {isPlaying ? (
                <Pause className="h-5 w-5" />
              ) : (
                <Play className="h-5 w-5" />
              )}
              <span className="sr-only">{isPlaying ? "Pause" : "Play"}</span>
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <FastForward className="h-4 w-4" />
              <span className="sr-only">Fast Forward</span>
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <SkipForward className="h-4 w-4" />
              <span className="sr-only">Next</span>
            </Button>
          </div>
          <div className="flex w-full items-center gap-2">
            <div className="text-xs tabular-nums text-muted-foreground">
              62:00
            </div>
            <Slider defaultValue={[33]} max={100} step={1} className="w-full" />
            <div className="text-xs tabular-nums text-muted-foreground">
              12:34
            </div>
          </div>
        </div>
        <div className="hidden items-center gap-2 md:flex">
          <Volume2 className="h-4 w-4 text-muted-foreground" />
          <Slider defaultValue={[70]} max={100} step={1} className="w-20" />
        </div>
      </div>
    </div>
  );
}