import {
  ArrowDownRight,
  ArrowUpRight,
  Minus,
} from "lucide-react";

export default function OmsorgStatCard({
  title,
  value,
  subtitle,
  trend = "neutral",
  icon: Icon,
}) {
  const TrendIcon =
    trend === "up"
      ? ArrowUpRight
      : trend === "down"
        ? ArrowDownRight
        : Minus;

  return (
    <article className="omsorg-stat-card">
      <div className="omsorg-stat-card__top">
        <div>
          <p className="omsorg-stat-card__title">
            {title}
          </p>

          <strong className="omsorg-stat-card__value">
            {value}
          </strong>
        </div>

        {Icon && (
          <div className="omsorg-stat-card__icon">
            <Icon size={22} />
          </div>
        )}
      </div>

      {subtitle && (
        <div
          className={`omsorg-stat-card__trend omsorg-stat-card__trend--${trend}`}
        >
          <TrendIcon size={16} />
          <span>{subtitle}</span>
        </div>
      )}
    </article>
  );
}