import Link from "next/link";
import "./HomeWalkingPill.css";

type ProgressDotState = "completed" | "current" | "upcoming";

type Props = {
  title: string;
  subtitle: string;
  accentColor: string;
  backgroundColor: string;
  linkTo: string;
  dots: ProgressDotState[];
  onDelete?: () => void;
  deleteLabel?: string;
  deleteConfirmMessage?: string;
};

export function HomeWalkingPill({
  title,
  subtitle,
  accentColor,
  backgroundColor,
  linkTo,
  dots,
  onDelete,
  deleteLabel,
  deleteConfirmMessage = "abandon this trail? your progress will be lost",
}: Props) {
  const handleDelete = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (confirm(deleteConfirmMessage)) {
      onDelete?.();
    }
  };

  return (
    <div className="HomeWalkingPill-wrapper">
      <Link href={linkTo} className="HomeWalkingPill">
        <div
          className="HomeWalkingPill-bg"
          style={
            {
              "--accent-color": accentColor,
              "--bg-color": backgroundColor,
              "--accent-color-transparent": `${accentColor}20`,
            } as React.CSSProperties
          }
        >
          <div className="HomeWalkingPill-content">
            <div className="HomeWalkingPill-header">
              <span className="HomeWalkingPill-title">{title}</span>
            </div>
            <div className="HomeWalkingPill-subtitle">{subtitle}</div>
            <div className="HomeWalkingPill-progress">
              {dots.map((state, idx) => (
                <div key={idx} className="HomeWalkingPill-dotWrapper">
                  <div className={`HomeWalkingPill-dot HomeWalkingPill-dot--${state}`} />
                  {idx < dots.length - 1 && <div className="HomeWalkingPill-line" />}
                </div>
              ))}
            </div>
          </div>
        </div>
      </Link>
      {onDelete && (
        <button
          onClick={handleDelete}
          className="HomeWalkingPill-deleteButton"
          aria-label={deleteLabel}
        >
          ×
        </button>
      )}
    </div>
  );
}
