"use client";

const TOTAL_DAYS = 30;
const DONE_DAYS = 20;
const TODAY = 20;

export default function StreakCard() {
  return (
    <section className="max-w-5xl mx-auto px-6 pb-10">
      <div
        className="relative rounded-2xl p-10 border border-[#1c2128] overflow-hidden"
        style={{ background: "#0d1117" }}
      >
       
        <div
          className="absolute top-0 left-0 right-0 h-px"
          style={{
            background:
              "linear-gradient(90deg, transparent, #3fb950, transparent)",
          }}
        />

        
        <div className="flex justify-between items-start mb-8">
          <div className="flex items-center gap-3">
            
            <div
              className="w-10 h-10 rounded-full flex items-center justify-center font-mono text-sm font-semibold text-[#3fb950]"
              style={{ background: "linear-gradient(135deg, #1a3a22, #3fb950)" }}
            >
              MS
            </div>
            <div>
              <div className="font-mono text-sm font-medium text-[#e6edf3]">
                Mohit Sati
              </div>
              <div className="text-xs text-[#768390]">Day 21 of 30 streak</div>
            </div>
          </div>

          
          <div
            className="rounded-lg px-4 py-2.5 text-right border"
            style={{
              background: "#1a3a22",
              borderColor: "rgba(63,185,80,0.3)",
            }}
          >
            <div className="font-mono text-xl font-semibold text-[#3fb950]">
              Ξ 0.1
            </div>
            <div className="text-[11px] text-[#768390] uppercase tracking-widest">
              Staked
            </div>
          </div>
        </div>

        
        <div
          className="grid gap-1 mb-5"
          style={{ gridTemplateColumns: `repeat(${TOTAL_DAYS}, 1fr)` }}
        >
          {Array.from({ length: TOTAL_DAYS }).map((_, i) => {
            let className =
              "aspect-square rounded-[3px] transition-all cursor-default ";
            if (i < DONE_DAYS) {
              className += "bg-[#3fb950]";
            } else if (i === TODAY) {
              className += "bg-[#3fb950] streak-today";
            } else {
              className +=
                "bg-[#1c2128] border border-dashed border-[#2d3748]";
            }
            return <div key={i} className={className} title={`Day ${i + 1}`} />;
          })}
        </div>

        
        <div className="flex gap-5 font-mono text-xs text-[#768390]">
          <span className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-sm bg-[#3fb950] inline-block" />
            Committed
          </span>
          <span className="flex items-center gap-1.5">
            <span
              className="w-2.5 h-2.5 rounded-sm bg-[#3fb950] inline-block streak-today"
            />
            Today
          </span>
          <span className="flex items-center gap-1.5">
            <span
              className="w-2.5 h-2.5 rounded-sm border border-dashed border-[#2d3748] inline-block"
              style={{ background: "#1c2128" }}
            />
            Pending
          </span>
        </div>

        
        <div className="flex items-center justify-between mt-6 pt-6 border-t border-[#1c2128]">
          <span className="font-mono text-sm font-semibold text-[#3fb950]">
            DAY 21
          </span>
          <div className="flex-1 mx-6 h-1.5 rounded-full bg-[#1c2128] overflow-hidden">
            <div
              className="h-full rounded-full"
              style={{
                width: `${(21 / 30) * 100}%`,
                background: "linear-gradient(90deg, #3fb950, #4de066)",
              }}
            />
          </div>
          <span className="font-mono text-sm text-[#768390]">30 DAYS</span>
        </div>
      </div>
    </section>
  );
}
