import { RefreshCwIcon } from "lucide-react"
import { Button } from "../ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const dummy = [
  {
    name: "Ipda Iwan",
    message: "Ndan, lokasi di Bundaran HI lalu lintas lancar",
    time: "16 Oct 2024, 13:44",
  },
  {
    name: "Ipda Iwan",
    message: "Ndan, lokasi di Bundaran HI lalu lintas lancar",
    time: "16 Oct 2024, 13:44",
  },
]

export default function DashboardSideMenu() {
  return (
    <div className="flex flex-col gap-10">
      <div className="flex flex-col gap-2">
        <div className="flex justify-between text-2xl font-semibold">
          Pesan Pribadi Terakhir
          <Button>
            <RefreshCwIcon />
          </Button>
        </div>
        <Carousel className="w-full">
          <CarouselContent>
            {dummy.map((list, index) => (
              <CarouselItem key={index}>
                <div className="flex flex-col gap-2 rounded-lg bg-white p-3 text-black">
                  <p className="text-lg font-bold">{list.name}</p>
                  <p className="">{list.message}</p>
                  <p className="text-right text-xs">{list.time}</p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>

      <div className="flex flex-col gap-2">
        <div className="flex justify-between text-2xl font-semibold">
          Panggilan Pribadi Terakhir
        </div>
        <Carousel className="w-full">
          <CarouselContent>
            {dummy.map((list, index) => (
              <CarouselItem key={index}>
                <div className="flex flex-col gap-2 rounded-lg bg-white p-3 text-black">
                  <p className="text-lg font-bold">{list.name}</p>
                  <p className="">{list.message}</p>
                  <p className="text-right text-xs">{list.time}</p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </div>
  )
}