"use client";

import { useState } from "react";
import { GalleryHorizontal } from "lucide-react";

/*
  Carrossel contínuo no "Redimensionar": quantos posts e o formato; a
  página vira uma tela larga fatiada sozinha (os elementos atravessam de um
  post para o outro). Ao baixar, sai um arquivo por post (ou um .zip).
*/
export function CarrosselContinuo({ fatias, aoVirar }: { fatias: number | null; aoVirar: (posts: number | null, quadrado?: boolean) => void }) {
  const [posts, setPosts] = useState(fatias || 5);
  const [quadrado, setQuadrado] = useState(false);
  return (
    <div className="mt-4 border-t border-[#EEEAF6] pt-4" data-carrossel-continuo>
      <p className="flex items-center gap-1.5 text-[13px] font-bold">
        <GalleryHorizontal size={15} className="text-[#7C3AED]" /> Carrossel contínuo
      </p>
      <p className="mt-1 text-[11.5px] leading-snug text-[#8A849E]">Uma tela larga que sai em posts: o que atravessa a linha continua no próximo, como um panorama.</p>
      <div className="mt-3 flex flex-wrap gap-1.5">
        {[2, 3, 4, 5, 6, 7, 8, 10].map((n) => (
          <button key={n} type="button" onClick={() => setPosts(n)} aria-pressed={posts === n} className={`h-8 min-w-[34px] rounded-[8px] px-2 text-[12px] font-bold tabular-nums transition ${posts === n ? "bg-[#7C3AED] text-white" : "bg-[#F3F1F9] text-[#2B2640] hover:bg-[#EAE5F7]"}`}>
            {n}
          </button>
        ))}
      </div>
      <div className="mt-2 flex rounded-[10px] bg-[#F1EFF6] p-1">
        {[
          { valor: false, rotulo: "Retrato 4:5" },
          { valor: true, rotulo: "Quadrado 1:1" },
        ].map((o) => (
          <button key={String(o.valor)} type="button" onClick={() => setQuadrado(o.valor)} className={`flex-1 rounded-[8px] py-1.5 text-[12px] font-bold transition ${quadrado === o.valor ? "bg-white text-[#5B21B6] shadow-[0_2px_8px_rgba(45,30,105,0.12)]" : "text-[#6B6584]"}`}>
            {o.rotulo}
          </button>
        ))}
      </div>
      <button type="button" onClick={() => aoVirar(posts, quadrado)} className="mt-3 flex h-10 w-full items-center justify-center rounded-[10px] bg-[#7C3AED] text-[13px] font-bold text-white transition hover:bg-[#6D28D9]" data-virar-carrossel>
        {fatias ? `Mudar para ${posts} posts` : `Virar carrossel de ${posts} posts`}
      </button>
      {fatias ? (
        <button type="button" onClick={() => aoVirar(null)} className="mt-1.5 w-full py-1.5 text-[12px] font-semibold text-[#8A849E] hover:text-[#1F1B2E]">
          Voltar a ser uma página só
        </button>
      ) : null}
    </div>
  );
}