"use client"

import { Progress } from "@/components/ui/progress"

export default function MetricsRFM({
  recency,
  frequency,
  monetary,
  rfmScore,
}: {
  recency: number
  frequency: number
  monetary: number
  rfmScore: number
}) {
  return (
    <div className="grid grid-cols-3 gap-3">
      <Metric title="R" value={recency} hint="近期互动（天）" />
      <Metric title="F" value={frequency} hint="频次（月）" />
      <Metric title="M" value={monetary} hint="金额（¥）" />
      <div className="col-span-3">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">RFM 得分</span>
          <span className="text-sm font-semibold">{rfmScore}</span>
        </div>
        <Progress value={Math.min(100, rfmScore)} className="h-2 mt-2" />
      </div>
    </div>
  )
}

function Metric({ title, value, hint }: { title: string; value: number; hint: string }) {
  return (
    <div className="rounded-lg border bg-white p-3">
      <div className="text-xs text-muted-foreground">{hint}</div>
      <div className="text-xl font-semibold mt-1">{value}</div>
      <div className="text-xs text-muted-foreground mt-0.5">{title}</div>
    </div>
  )
}
