import { ReactNode } from "react";

interface CardListProps {
  children: ReactNode;
  ariaLabel?: string;
}

export function CardList({ children, ariaLabel }: CardListProps) {
  return (
    <ul role="list" aria-label={ariaLabel} className="space-y-3 px-4 pb-24">
      {children}
    </ul>
  );
}

interface CardListItemProps {
  onClick?: () => void;
  href?: string;
  children: ReactNode;
  as?: "li" | "div";
}

export function CardListItem({ onClick, href, children, as = "li" }: CardListItemProps) {
  const content = (
    <div
      className="rounded-2xl p-4 transition-colors"
      style={{
        backgroundColor: "var(--color-surface-2)",
        minHeight: "72px",
        boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
      }}
    >
      {children}
    </div>
  );

  if (href) {
    return (
      <li>
        <a href={href} className="block active:scale-[0.99] transition-transform" style={{ minHeight: "72px" }}>
          {content}
        </a>
      </li>
    );
  }
  if (onClick) {
    return (
      <li>
        <button
          type="button"
          onClick={onClick}
          className="block w-full text-left active:scale-[0.99] transition-transform"
          style={{ minHeight: "72px" }}
        >
          {content}
        </button>
      </li>
    );
  }
  return <li>{content}</li>;
}
