import React from "react";
import { Linking, View } from "react-native";
import { UsefulBox } from "@/components/TrainMenu/UsefulBox";
import MaterialCommunityIcons from "@expo/vector-icons/build/MaterialCommunityIcons";
export const TopMenuButton = () => {
  const buttonList:{
    backgroundColor: string;
    icon: keyof typeof MaterialCommunityIcons.glyphMap;
    onPress: () => void;
    title: string;
  }[] = [
    {
      backgroundColor: "#F89038",
      icon: "train-car",
      onPress: () =>
        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
      title: "駅・鉄道情報",
    },
    {
      backgroundColor: "#EA4752",
      icon: "google-spreadsheet",
      onPress: () =>
        Linking.openURL(
          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
        ),
      title: "運賃表",
    },
    {
      backgroundColor: "#91C31F",
      icon: "clipboard-list-outline",
      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
      title: "予約",
    },
  ];


  return (
    <View style={{ flexDirection: "row" }}>
      {buttonList.map((d, index) => (
        <UsefulBox
          backgroundColor={d.backgroundColor}
          icon={d.icon}
          flex={1}
          onPressButton={d.onPress}
          key={index + d.icon}
        >
          {d.title}
        </UsefulBox>
      ))}
    </View>
  );
};