import { View, Text, StyleSheet } from "@react-pdf/renderer";
import { C, S } from "../styles";
import type { SeoSection } from "../../types";

const s = StyleSheet.create({
  container: {
    backgroundColor: "#fffbeb",
    borderWidth: 0.75,
    borderColor: "#fde68a",
    borderRadius: 6,
    padding: 18,
  },
  heading: { ...S.h2, marginBottom: 4 },
  subtext: { ...S.small, marginBottom: 14 },
  innerLabel: { ...S.label, color: C.amber, marginBottom: 10 },
  winRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 8,
    borderBottomWidth: 0.5,
    borderBottomColor: "#fde68a",
  },
  winText: { flex: 1, fontSize: 10.5, color: "#78350f", lineHeight: 1.4, paddingRight: 12 },
  timeBadge: {
    backgroundColor: "#fef3c7",
    borderRadius: 20,
    paddingHorizontal: 8,
    paddingVertical: 3,
    flexShrink: 0,
  },
  timeText: { fontSize: 8, fontFamily: "Helvetica-Bold", color: C.amber },
});

interface Props {
  seo: SeoSection;
}

export function QuickWins({ seo }: Props) {
  const wins = seo.quickWins;
  return (
    <View>
      <Text style={s.heading}>Quick Wins</Text>
      <Text style={s.subtext}>Actions you can complete in under one hour that have immediate impact.</Text>
      <View style={s.container}>
        <Text style={s.innerLabel}>Implement This Week</Text>
        {wins.map((w, i) => (
          <View key={i} style={[s.winRow, i === wins.length - 1 ? { borderBottomWidth: 0 } : {}]}>
            <Text style={s.winText}>{w.title}</Text>
            <View style={s.timeBadge}>
              <Text style={s.timeText}>{w.estimatedTime}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}
