'use client';


import { cn } from "../../utils/cn.mjs";
import { Button } from "../Button/Button.mjs";
import { Modal, ModalSize } from "../Modal/Modal.mjs";
import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
import { useState } from "react";
import { MoveDiagonal } from "lucide-react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Table/Table.tsx
/**
* Table component that provides an enhanced table experience with modal expansion and collapsible content
*
* The Table component wraps a standard HTML table element with additional functionality:
* - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
* - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
* - **Responsive Design**: Handles large tables gracefully with modal overflow
* - **Sticky Controls**: Table controls remain accessible even when scrolling
*
* ## Features
* - **Modal View**: Full-screen modal for better viewing of large tables
* - **Expand/Collapse**: Optional collapsible wrapper to save space
* - **Responsive**: Handles overflow and responsive behavior automatically
* - **Accessibility**: Maintains proper table semantics and keyboard navigation
* - **Customizable**: Supports all standard HTML table attributes and styling
*
* ## Best Practices
* - Use semantic HTML table structure (thead, tbody, tfoot)
* - Provide proper column headers with scope attributes
* - Use the isRollable prop for large tables that might need space management
* - Apply consistent styling through the className prop
* - Consider pagination for very large datasets
*
* @param {TableProps} props - The properties for the Table component
* @returns {JSX.Element} The rendered table with enhanced functionality
*
* @example
* ```tsx
* // Simple data table
* <Table>
*   <thead>
*     <tr>
*       <th scope="col">Name</th>
*       <th scope="col">Email</th>
*       <th scope="col">Status</th>
*     </tr>
*   </thead>
*   <tbody>
*     <tr>
*       <td>John Doe</td>
*       <td>john@example.com</td>
*       <td>
*         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
*           Active
*         </span>
*       </td>
*     </tr>
*     <tr>
*       <td>Jane Smith</td>
*       <td>jane@example.com</td>
*       <td>
*         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
*           Pending
*         </span>
*       </td>
*     </tr>
*   </tbody>
* </Table>
*
* // Large collapsible table with custom styling
* <Table
*   isRollable
*   className="border border-gray-200 rounded-lg overflow-hidden"
* >
*   <thead className="bg-gray-50">
*     <tr>
*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
*         Product ID
*       </th>
*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
*         Name
*       </th>
*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
*         Category
*       </th>
*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
*         Price
*       </th>
*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
*         Stock
*       </th>
*     </tr>
*   </thead>
*   <tbody className="bg-white divide-y divide-gray-200">
*     {products.map((product) => (
*       <tr key={product.id} className="hover:bg-gray-50">
*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
*           #{product.id}
*         </td>
*         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
*           {product.name}
*         </td>
*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
*           {product.category}
*         </td>
*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
*           ${product.price.toFixed(2)}
*         </td>
*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
*           {product.stock} units
*         </td>
*       </tr>
*     ))}
*   </tbody>
* </Table>
*
* // Financial data table with formatted numbers
* <Table className="w-full border-collapse">
*   <thead>
*     <tr className="border-b-2 border-gray-300">
*       <th scope="col" className="text-left py-3 px-4">Quarter</th>
*       <th scope="col" className="text-right py-3 px-4">Revenue</th>
*       <th scope="col" className="text-right py-3 px-4">Profit</th>
*       <th scope="col" className="text-right py-3 px-4">Growth</th>
*     </tr>
*   </thead>
*   <tbody>
*     <tr className="border-b border-gray-200">
*       <td className="py-3 px-4 font-medium">Q1 2024</td>
*       <td className="py-3 px-4 text-right">$2,450,000</td>
*       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
*       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
*     </tr>
*     <tr className="border-b border-gray-200">
*       <td className="py-3 px-4 font-medium">Q2 2024</td>
*       <td className="py-3 px-4 text-right">$2,780,000</td>
*       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
*       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
*     </tr>
*   </tbody>
* </Table>
* ```
*
* @see {@link ExpandCollapse} - Component used for collapsible table content
* @see {@link Modal} - Component used for full-screen table view
* @see {@link Button} - Component used for the modal trigger button
*/
const Table = ({ className, isRollable = false, displayModal, ...props }) => {
	const [isModalOpen, setIsModalOpen] = useState(false);
	return /* @__PURE__ */ jsxs("div", {
		className: "relative",
		children: [
			displayModal && /* @__PURE__ */ jsx("div", {
				className: "sticky top-48 z-10",
				children: /* @__PURE__ */ jsx("div", {
					className: "absolute top-4 right-2",
					children: /* @__PURE__ */ jsx(Button, {
						variant: "hoverable",
						size: "icon-md",
						onClick: () => {
							setIsModalOpen(true);
						},
						label: "Move",
						Icon: MoveDiagonal
					})
				})
			}),
			/* @__PURE__ */ jsx(ExpandCollapse, {
				isRollable,
				className: "max-w-full overflow-x-auto",
				children: /* @__PURE__ */ jsx("table", {
					className: cn("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
					...props
				})
			}),
			/* @__PURE__ */ jsx(Modal, {
				isOpen: isModalOpen,
				onClose: () => setIsModalOpen(false),
				size: ModalSize.XL,
				hasCloseButton: true,
				children: isModalOpen ? /* @__PURE__ */ jsx("div", {
					className: "grid",
					children: /* @__PURE__ */ jsx("table", {
						className: cn("min-w-full max-w-full table-auto text-left", className),
						...props
					})
				}) : /* @__PURE__ */ jsx(Fragment$1, {})
			})
		]
	});
};

//#endregion
export { Table };
//# sourceMappingURL=Table.mjs.map