import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import React from "react";

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

const listTileVariants = cva(
  "flex cursor-pointer items-center justify-between",
  {
    variants: {
      size: {
        sm: "",
        md: "h-[54px] px-[16px]",
        lg: "h-[70px] px-[12px]",
      },
    },
    defaultVariants: {
      size: "md",
    },
  },
);

export interface ListTileProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof listTileVariants> {
  leading?: React.ReactNode;
  trailing?: React.ReactNode;
  subTitle?: React.ReactNode;
}

const ListTile = ({
  leading,
  trailing,
  subTitle,
  title,
  size,
  className,
  ...props
}: ListTileProps) => {
  return (
    <div className={cn(listTileVariants({ size }), className)} {...props}>
      {leading && (
        <div className="order-first mr-2 shrink-0 text-gray-500 md:mr-2">
          {leading}
        </div>
      )}
      {trailing && (
        <div className="order-last ml-2 shrink-0 text-xs text-gray-500 md:ml-2">
          {trailing}
        </div>
      )}
      <div className="flex h-full max-w-[80%] grow flex-col items-stretch justify-center overflow-hidden">
        <div className="h-5 whitespace-nowrap text-[14px]">{title}</div>
        {subTitle && <div className=" text-xs text-gray-500">{subTitle}</div>}
      </div>
    </div>
  );
};

export default ListTile;