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

const formatDate = (dateString: string): string => {
  return new Date(dateString).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
  });
};

const dateVariants = cva("cursor-help", {
  variants: {
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
    },
    variant: {
      default: "text-ctp-text",
      muted: "text-ctp-subtext0",
      subtle: "text-ctp-subtext1",
    },
  },
  defaultVariants: {
    size: "md",
    variant: "default",
  },
});

interface FormattedDateProps extends VariantProps<typeof dateVariants> {
  /**
   * ISO date string to format
   */
  date: string;
  /**
   * Optional additional CSS class name
   */
  className?: string;
}

/**
 * Displays a formatted date with full date on hover
 *
 * @example
 * <FormattedDate date="2024-01-15T00:00:00Z" />
 * // Displays: "Jan 2024"
 * // Tooltip: "January 15, 2024"
 *
 * @example
 * <FormattedDate date="2024-01-15T00:00:00Z" variant="muted" size="sm" />
 */
export const FormattedDate = ({
  date,
  size,
  variant,
  className,
}: FormattedDateProps) => {
  const shortDate = formatDate(date);
  const fullDate = new Date(date).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <time
      dateTime={date}
      title={fullDate}
      className={dateVariants({ size, variant, className })}
    >
      {shortDate}
    </time>
  );
};