'use client';

import Link from 'next/link';
import { LucideIcon } from 'lucide-react';

import { Section } from './Section';
import { colors, typography } from '@/styles/theme';

export interface TaskCard {
  id: string;
  name: string;
  desc: string;
  path: string;
  icon?: LucideIcon;
}

export interface TasksSectionProps {
  title: string;
  description?: string;
  cards: TaskCard[];
}

export function TasksSection({ title, description, cards }: TasksSectionProps) {
  return (
    <Section title={title} description={description}>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Link
              key={c.id}
              href={c.path}
              className="block rounded-md p-4 transition-colors hover:bg-gray-50"
              style={{ border: `1px solid ${colors.border}` }}
            >
              <div className="flex items-start gap-3">
                {Icon && (
                  <Icon
                    className="w-5 h-5 mt-0.5 flex-shrink-0"
                    style={{ color: colors.primary }}
                  />
                )}
                <div className="min-w-0">
                  <div className={`${typography.body} font-medium`}>{c.name}</div>
                  <div className={`${typography.caption} mt-1`}>{c.desc}</div>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </Section>
  );
}