import { forwardRef, HTMLAttributes } from "react";

const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={
        "bg-base-0 border-base-300 text-base-800 rounded border shadow-sm " +
        className
      }
      {...props}
    />
  ),
);
Card.displayName = "Card";

const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={"flex flex-col space-y-1.5 p-6 " + className}
      {...props}
    />
  ),
);
CardHeader.displayName = "CardHeader";

const CardTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={
        "text-2xl font-semibold leading-none tracking-tight " + className
      }
      {...props}
    />
  ),
);
CardTitle.displayName = "CardTitle";

const CardDescription = forwardRef<
  HTMLDivElement,
  HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={"text-base-500 text-sm " + className} {...props} />
));
CardDescription.displayName = "CardDescription";

const CardBody = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={"p-6 pt-0 " + className} {...props} />
));
CardBody.displayName = "CardBody";

const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={"flex items-center gap-4 px-6 pb-6 " + className}
      {...props}
    />
  ),
);
CardFooter.displayName = "CardFooter";

export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle };

import { Button } from "../core/button";
import {
  Card,
  CardBody,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../core/card";

export const CardExample = () => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardBody>
        <div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolor
          perferendis omnis odio odit mollitia voluptas libero iste voluptatibus
          dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Architecto placeat reprehenderit ut consequuntur laudantium! Lorem
          ipsum dolor sit amet,
        </div>
      </CardBody>
      <CardFooter className="flex justify-between">
        <Button variant="outline" fullWidth>
          Cancel
        </Button>
        <Button fullWidth>Deploy</Button>
      </CardFooter>
    </Card>
  );
};