<template>
    <div class="p-6 max-w-4xl mx-auto">
        <h1 class="text-2xl font-bold mb-4">Delim Clone Tool</h1>
        <textarea v-model="input" class="w-full border rounded p-2 mb-4" placeholder="Paste your delimited data here..."
            rows="6"></textarea>
        <div class="flex flex-wrap gap-2 mb-4">
            <button v-for="sep in delimiters" :key="sep" @click="setDelimiter(sep)"
                class="border px-3 py-1 rounded hover:bg-gray-100">
                {{ sep === '\t' ? 'Tab' : sep }}
            </button>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded" @click="processData">Parse</button>

        <div v-if="rows.length" class="overflow-x-auto mt-6">
            <table class="table-auto border-collapse w-full">
                <thead>
                    <tr>
                        <th v-for="(col, idx) in rows[0]" :key="idx" class="border px-2 py-1 bg-gray-100">Column {{ idx
                            + 1 }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, rIdx) in rows.slice(1)" :key="rIdx">
                        <td v-for="(cell, cIdx) in row" :key="cIdx" class="border px-2 py-1">{{ cell }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const input = ref('');
const delimiter = ref(',');
const rows = ref([]);
const delimiters = [',', '\t', ';', '|'];

const setDelimiter = (sep) => {
    delimiter.value = sep;
};

const processData = () => {
    const lines = input.value.split('\n').filter(Boolean);
    rows.value = lines.map(line => line.split(delimiter.value));
};
</script>

<style scoped>
table {
    min-width: 600px;
}

th,
td {
    white-space: nowrap;
}
</style>
