import React from "react";

export function Pagination({ className = "", children, ...props }) {
  return <nav aria-label="pagination" className={["o-pagination", className].filter(Boolean).join(" ")} data-slot="pagination" {...props}>{children}</nav>;
}
export function PaginationContent({ className = "", children, ...props }) {
  return <ul className={["o-pagination__list", className].filter(Boolean).join(" ")} data-slot="pagination-content" {...props}>{children}</ul>;
}
export function PaginationItem({ children, ...props }) {
  return <li data-slot="pagination-item" {...props}>{children}</li>;
}
export function PaginationLink({ isActive = false, size = "icon", className = "", children, ...props }) {
  const cls = ["o-btn", isActive ? "o-btn--outline" : "o-btn--ghost", size === "icon" ? "o-btn--icon" : "", className].filter(Boolean).join(" ");
  return <a aria-current={isActive ? "page" : undefined} className={cls} data-slot="pagination-link" data-active={isActive || undefined} {...props}>{children}</a>;
}
export function PaginationPrevious({ className = "", ...props }) {
  return (
    <PaginationLink size="default" className={className} aria-label="Go to previous page" {...props}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
      <span>Previous</span>
    </PaginationLink>
  );
}
export function PaginationNext({ className = "", ...props }) {
  return (
    <PaginationLink size="default" className={className} aria-label="Go to next page" {...props}>
      <span>Next</span>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
    </PaginationLink>
  );
}
export function PaginationEllipsis() {
  return (
    <span aria-hidden className="o-pagination__ellipsis" data-slot="pagination-ellipsis">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>
    </span>
  );
}
