import * as React from "react";

import { cn } from "@/lib/utils";

const Card: FCC<React.ComponentProps<"div">> = ({
  className,
  ...props
}) => (
  <div
    className={cn(
      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
      className,
    )}
    {...props}
  />
);
Card.displayName = "Card";

const CardHeader: FCC<React.ComponentProps<"div">> = ({
  className,
  ...props
}) => (
  <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
);
CardHeader.displayName = "CardHeader";

const CardTitle: FCC<React.ComponentProps<"h3">> = ({
  className,
  ...props
}) => (
  <h3
    className={cn(
      "font-semibold leading-none tracking-tight text-neutral-900 dark:text-neutral-50",
      className,
    )}
    {...props}
  />
);
CardTitle.displayName = "CardTitle";

const CardDescription: FCC<React.ComponentProps<"p">> = ({
  className,
  ...props
}) => (
  <p
    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
    {...props}
  />
);
CardDescription.displayName = "CardDescription";

const CardContent: FCC<React.ComponentProps<"div">> = ({
  className,
  ...props
}) => <div className={cn("p-6 pt-0", className)} {...props} />;
CardContent.displayName = "CardContent";

const CardFooter: FCC<React.ComponentProps<"div">> = ({
  className,
  ...props
}) => (
  <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
);
CardFooter.displayName = "CardFooter";

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