import * as React from 'react';
import Link from 'next/link';

export interface AboutOrganizationInfoProps {
  title: string;
  rows: { label: string; value: string; isLink?: boolean }[];
  contactText: string;
}

export function AboutOrganizationInfo({ title, rows, contactText }: AboutOrganizationInfoProps) {
  return (
    <section>
      <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
        {title}
      </h2>
      <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
        <table className="w-full text-sm">
          <tbody>
            {rows && rows.map((row, i) => (
              <tr key={i} className={(i !== rows.length - 1 || contactText) ? "border-b border-soft-gray-border" : ""}>
                <th className="text-text-light-gray text-left py-3 pr-4 font-semibold md:w-1/3">{row.label}</th>
                <td className="text-text-white py-3 break-all">
                  {row.isLink ? (
                    <Link href={row.value.startsWith('http') ? row.value : `https://${row.value}`} className="text-crimson-red hover:text-hover-red transition-colors underline">
                      {row.value}
                    </Link>
                  ) : (
                    row.value
                  )}
                </td>
              </tr>
            ))}
            {contactText && (
              <tr>
                <th className="text-text-light-gray text-left py-3 pr-4 font-semibold">お問い合わせ</th>
                <td className="text-text-white py-3">{contactText}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </section>
  );
}
