import React from 'react';

interface ComplianceItem {
  label: string;
  checked: boolean;
  description?: string;
}

interface ComplianceChecklistProps {
  items: ComplianceItem[];
  title?: string;
}

export function ComplianceChecklist({ items, title = 'TCPA Compliance Checklist' }: ComplianceChecklistProps) {
  const checkedCount = items.filter((item) => item.checked).length;
  const totalCount = items.length;
  const percentage = Math.round((checkedCount / totalCount) * 100);

  return (
    <div
      style={{
        padding: 'var(--spacing-6)',
        background: 'var(--color-background-secondary)',
        borderRadius: 'var(--border-radius-lg)',
        border: `1px solid var(--color-border-secondary)`,
      }}
    >
      <div style={{ marginBottom: 'var(--spacing-4)' }}>
        <h3
          style={{
            fontSize: 'var(--font-size-lg)',
            fontWeight: 600,
            color: 'var(--color-text-primary)',
            marginBottom: 'var(--spacing-2)',
          }}
        >
          {title}
        </h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-3)' }}>
          <div
            style={{
              flex: 1,
              height: '8px',
              background: 'var(--color-background-tertiary)',
              borderRadius: '4px',
              overflow: 'hidden',
            }}
          >
            <div
              style={{
                height: '100%',
                background: percentage === 100 ? 'var(--color-success)' : 'var(--color-warning)',
                width: `${percentage}%`,
                transition: 'width 0.3s ease',
              }}
            />
          </div>
          <span
            style={{
              fontSize: 'var(--font-size-sm)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
            }}
          >
            {checkedCount}/{totalCount}
          </span>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3)' }}>
        {items.map((item, index) => (
          <div
            key={index}
            style={{
              display: 'flex',
              gap: 'var(--spacing-3)',
              alignItems: 'flex-start',
            }}
          >
            <div
              style={{
                width: '20px',
                height: '20px',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
                marginTop: '2px',
                background: item.checked ? 'var(--color-success)' : 'var(--color-background-tertiary)',
                color: item.checked ? 'white' : 'var(--color-text-tertiary)',
                fontSize: 'var(--font-size-xs)',
                fontWeight: 700,
              }}
            >
              {item.checked ? '✓' : ''}
            </div>
            <div style={{ flex: 1 }}>
              <div
                style={{
                  fontSize: 'var(--font-size-sm)',
                  fontWeight: 500,
                  color: item.checked ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
                  textDecoration: item.checked ? 'none' : 'none',
                }}
              >
                {item.label}
              </div>
              {item.description && (
                <div
                  style={{
                    fontSize: 'var(--font-size-xs)',
                    color: 'var(--color-text-tertiary)',
                    marginTop: 'var(--spacing-1)',
                  }}
                >
                  {item.description}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {percentage === 100 && (
        <div
          style={{
            marginTop: 'var(--spacing-4)',
            padding: 'var(--spacing-3)',
            background: '#d1fae5',
            color: '#065f46',
            borderRadius: 'var(--border-radius-md)',
            fontSize: 'var(--font-size-sm)',
            fontWeight: 600,
            textAlign: 'center',
          }}
        >
          ✓ All compliance requirements met
        </div>
      )}
    </div>
  );
}
