"use client";

import { useState, type ReactNode } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";

export function LinkCarousel({
  primary,
  secondary,
}: {
  primary: ReactNode;
  secondary: ReactNode;
}) {
  const [page, setPage] = useState<0 | 1>(0);

  return (
    <CardContent>
      <div
        key={page}
        className="animate-in fade-in slide-in-from-bottom-2 duration-150"
      >
        {page === 0 ? primary : secondary}
      </div>
      <div className="flex items-center justify-between gap-3 pt-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setPage(0)}
          disabled={page === 0}
          aria-label="หน้าก่อนหน้า"
        >
          <ArrowLeft />
        </Button>
        <span
          className="text-xs font-medium text-muted-foreground"
          aria-live="polite"
        >
          {page + 1} / 2
        </span>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setPage(1)}
          disabled={page === 1}
          aria-label="หน้าถัดไป"
        >
          <ArrowRight />
        </Button>
      </div>
    </CardContent>
  );
}