"use client";

import { useState } from "react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "./collapsible";

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex items-center justify-center p-8">
      <Collapsible
        open={isOpen}
        onOpenChange={setIsOpen}
        className="w-full max-w-sm space-y-2"
      >
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-heading">Repositories</h4>
          <CollapsibleTrigger className="inline-flex items-center justify-center rounded-base border-2 border-border bg-secondary-background px-3 py-1 text-xs font-base shadow-shadow hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none">
            {isOpen ? "Show less" : "Show more"}
          </CollapsibleTrigger>
        </div>
        <div className="rounded-base border-2 border-border bg-secondary-background px-4 py-2 font-base text-sm shadow-shadow">
          @radix-ui/primitives
        </div>
        <CollapsibleContent className="space-y-2">
          <div className="rounded-base border-2 border-border bg-secondary-background px-4 py-2 font-base text-sm shadow-shadow">
            @radix-ui/colors
          </div>
          <div className="rounded-base border-2 border-border bg-secondary-background px-4 py-2 font-base text-sm shadow-shadow">
            @stitches/react
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}